Skip to content

[注解] [204] 边框内圆角 #33

Open
@cssmagic

Description

@cssmagic

花絮与注解

第 26 页 · 第四段

事实上,指定一个等于描边宽度的扩张值在某些浏览器中可能会得到渲染异常……

此时描边和投影在理论上所占的范围应该是完全一样的,这里所说的 “渲染异常” 指的是投影可能会溢出描边的范围。

出现这种渲染异常的底层原因在于,描边与投影的绘制原理不同:描边是完全规则的矩形,完全对齐像素;而具有扩张效果的投影需要由元素的原始形状扩散而成。

对浏览器来说,前者更像是一种基于光栅的绘图算法,而后者更像是一种矢量算法。因此,在对待非整数像素值时,两者的行为可能存在差别——前者在渲染前会对像素长度值取整,而后者可能会接受非整数的长度值(在计算出矢量路径之后光栅化),从而引发两者之间的渲染误差。

如果浏览器的显示比例处于缩放的情况下,或者显示器是视网膜屏幕(由多个物理像素显示一个逻辑像素的高精度显示设备),又或者元素处于 CSS 动画之中,通常比较容易出现这种渲染误差。

交流与答疑

(暂无)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions