Skip to content

[注解] [206] 复杂的背景图案 #65

Description

@cssmagic

交流与答疑

网友提问:

我按书上的方法用渐变写出了棋盘图案,但为什么方格的对角线会出现缝隙?有什么解决办法吗?

说到缝隙,最根本的原因在于,CSS 描述的是矢量信息,而浏览器需要以位图的方式把渲染效果显示出来,因为显示设备都是基于像素的。矢量信息在整个渲染过程中的哪个环节转换为位图信息,决定了最终渲染效果的误差有多少。理论上来说,矢量信息越晚转换为位图,渲染效果越精确,但计算也越复杂或越难做到。

在这个例子中,绘制方格的原理是通过两个直角三角形拼接而成。由于这种斜向渐变的渲染结果不可能是对齐到像素的位图,因此,在斜边拼接的地方很容易产生缝隙。

总的来说,本节的重心在于呈现思维方式。如果你真的要实现一个棋盘图案,还是选择其它更可靠的方案为佳。

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions