Skip to content

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

Open
@cssmagic

Description

@cssmagic

交流与答疑

网友提问:

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

说到缝隙,最根本的原因在于,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