Page 62 - css揭秘

是 60°怎么办？或者是 30°？又或者是 3.141 592 653 5°？如果我们只是把渐
变的角度改一下，那么结果看起来会相当糟糕。（比如在图 2-34 中，我们尝
试实现 60°条纹，但以失败告终。）
幸运的是，我们还有更好的方法来创建斜向条纹。一个鲜为人知的真
相是 linear-gradient() 和 radial-gradient() 还各有一个循环式的加强
版：repeating-linear-gradient() 和 repeating-radial-gradient()。 图 2-34
它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直 我们对 60°条纹的尝试很傻很天
到填满整个背景。下面是一个重复渐变的例子（效果参见图 2-35）： 真，失败了

background: repeating-linear-gradient(45deg,
#fb3, #58a 30px);

它相当于下面这个简单的线性渐变：

background: linear-gradient(45deg,
#fb3, #58a 30px,
#fb3 30px, #58a 60px, 图 2-35
#fb3 60px, #58a 90px,
#fb3 90px, #58a 120px, 一个重复线性渐变图案
#fb3 120px, #58a 150px, ...);

重复线性渐变完美适用于——你已经猜到了吧——条纹效果！这得益于
它们可以无限循环的天赋，一个渐变图案就可自动重复并铺满整个背景。因
此，我们再也不需要去操心如何创建出可以无缝拼接的贴片了。

作个对比，我们在图 2-33 中创建的效果也可以由这个重复渐变来生成：

background: repeating-linear-gradient(45deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);

第一个明显的好处就是减少了重复：我们要改动任何颜色时只需要修改
两处，而不是原来的三处。另外一点也很重要，我们现在是在渐变的色标中
指定长度，而不是原来的 background-size。这里的 background-size 是
初始值，对渐变来说就是以整个元素的范围进行填充。这意味着代码中的长
度值更加直观，因为这些长度是直接在渐变轴上进行度量的，直接代表了条
纹自身的宽度。我们再也不需要计算什么 2 了！

不过这还不是最大的好处。最大的好处在于，现在我们可以随心所欲
地改变渐变的角度了，指哪儿打哪儿，再也不需要苦苦思索如何生成一个
无缝贴片。举例来说，我们苦苦追寻的 60°条纹只需这样写即可（参见图
2-36）：

background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);
图 2-36
这简单到只需要改改角度就可以了！请注意，在这个方法中，不论条 我们终于得到了真正的 60°条纹

5 条纹背景 31

඀ࠡ JOEC