Page 63 - css揭秘

纹的角度如何，我们在创建双色条纹时都需要用到四个色标。这意味着，我
们最好用前面的方法来实现水平或垂直的条纹，而用这种方法来实现斜向条
纹。另外，在处理 45°条纹时，我们甚至可以把这两种方法结合起来，本质
上是通过重复线性渐变来简化贴片的代码：

background: repeating-linear-gradient(45deg,
#fb3 0, #fb3 25%, #58a 0, #58a 50%);
background-size: 42.426406871px 42.426406871px;

试一试 play.csssecrets.io/diagonal-stripes-60deg

灵活的同色系条纹

在大多数情况下，我们想要的条纹图案并不是由差异极大的几种颜色组
成的，这些颜色往往属于同一色系，只是在明度方面有着轻微的差异。举个
例子，我们来看看这个条纹图案：

background: repeating-linear-gradient(30deg,
#79b, #79b 15px, #58a 0, #58a 30px);
图 2-37
这个条纹是由蓝色及其浅色变体 在图 2-37 中可以看到，条纹是由一个主色调（ #58a）和它的浅色
所组成的
变体所组成的。但是，这两种颜色之间的关系在代码中并没有体现出来。此
外，如果我们想要改变这个条纹的主色调，甚至需要修改四处！

幸运的是，还有一种更好的方法：不再为每种条纹单独指定颜色，而是
把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来
得到浅色条纹：

关于未来 包含两个位置信息的色标

根据 CSS 图像（第四版） （http://w3.org/TR/css4-images）计划新增的一个简化语法来看，很快我们就
可以在同一个色标上指定两个位置值了。这个简写语法的含义相当于两个连续的色标具有相同的颜色和不
同的位置，这个特性在创建渐变图案时是十分有用的。举个例子，用这个新语法来生成图 2-36 中的斜向
条纹：

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

这样的代码不仅更加简单，而且显然是更加 DRY 的：颜色值再也不需要重复了，因此我们在改动颜色时
只需要修改一处。遗憾的是，在我写书的当下，还没有任何浏览器支持这个特性。

测一测 play.csssecrets.io/test-color-stop-2positions

32 第 2 章 背景与边框

඀ࠡ JOEC