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

[cssmagic]

交流与答疑

网友提问：

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

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

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

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