Page 66 - css揭秘
P. 66
图 2-38
我的 CSS3 图案库（位于 lea.
verou.me/css3patterns）展示了
CSS 渐变早在 2011 年就能够实
现的效果。在 2011 年到 2012 年
间，几乎每篇文章、每本书、每
场技术会议在提到 CSS 渐变时都
会提到这个图案库；而且几大浏
览器厂商也曾用它来调校自己在
CSS 渐变上的实现。但是，并不
是里面的每个例子都适用于生产
环境。其中的某些例子只是用来
展示可能性，而且它们用到的代
码极度冗长繁琐。对于这些例子
来说，SVG 可能是更好的选择。
关于 SVG 图案的演示，请访问
philbit.com/svgpatterns，这个网
站是 CSS 图案库的 SVG 版实现
我们得到的结果就是一幅用 1px 白线画出来的 30px 大小的网格图案
（参见图 2-40）。与“灵活的同色系条纹”一节中的例子类似，主色调在这
里也起到了回退颜色的作用。
该网格是一个很好的例子，说明图案可以用合理的、可维护的（尽管还
不是完全 DRY 的）CSS 代码生成。
当需要改变网格的尺寸、线宽或者任何颜色时，我们可以很容易地 图 2-39
找到需要编辑的地方。 我们的桌布（方格纹）图案，是
由两层渐变图案所组成的（按照
在改变图案的任何一个要素时，我们不需要做大量的修改，而是只
惯例，灰色的棋盘图案表示透明）
6 复杂的背景图案 35
ࠡ JOEC
