Page 65 - css揭秘

一种。我们还需要很多其他不同类型的图案，比如网格、波点、棋盘等。
幸运的是，CSS 渐变在实现这些图案时也能大展拳脚。用 CSS 渐变
来创建任何种类的几何图案几乎都是可能的，只不过有时这种方法不太实
际。我们可能稍不留神就会弄出一大块无法维护的代码。CSS 图案可以算
是一个值得使用 CSS 预处理器（比如 Sass，http://sass-lang.com）来减
少代码冗余的案例，因为最终图案越复杂，相应的代码就会变得越来越不
DRY。
在本篇攻略中，我们将深入讨论如何创建那些简单而常用的图案。

网格

只使用一个渐变时，我们能创建的图案并不多。当我们把多个渐变图
案组合起来，让它们透过彼此的透明区域显现时，神奇的事情就发生了。按
照这个思路，我们首先想到的可能就是把水平和垂直的条纹叠加起来，从而
得到各种样式的网格。举例来说，下面的代码会创建如图 2-39 所示的桌布
（方格纹）图案。

background: white;
background-image: linear-gradient(90deg,
rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(
rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

在某些情况下，我们希望网格中每个格子的大小可以调整，而网格线条
的粗细同时保持固定。举例来说，类似图纸辅助线的网格就是这种情况。这
是一个非常好的例子，展示了使用长度而不是百分比作为色标的场景：

background: #58a;
background-image:
linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;

34 第 2 章 背景与边框

඀ࠡ JOEC