Page 60 - css揭秘

这意味着，如果我们把第二个色标的位置值设置为 0，那它的位置就
总是会被浏览器调整为前一个色标的位置值，这个结果正是我们想要的。
因此，下面的代码会产生跟图 2-26 完全一样的条纹背景，但代码会更加
DRY：

background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px; 图 2-26
不等宽的条纹图案
如果要创建超过两种颜色的条纹，也是很容易的。举例来说，下面的代
码可以生成三种颜色的水平条纹（参见图 2-27）：

background: linear-gradient(#fb3 33.3%,
#58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

试一试 play.csssecrets.io/horizontal-stripes 图 2-27
有三种颜色的条纹图案

垂直条纹

水平条纹是最容易用代码写出来的，但我们在网页上看到的条纹图案并
不都是水平的。有些条纹是垂直的（参见图 2-28），而且某些形态的斜条纹
或许更受欢迎，或者看起来更加有趣。幸运的是，CSS 渐变同样也能帮助我
们创建出这些效果，只是难度稍有不同。

垂直条纹的代码跟水平条纹几乎是一样的，差别主要在于：我们需要在
开头加上一个额外的参数来指定渐变的方向。在水平条纹的代码中，我们其
实也可以加上这个参数，只不过它的默认值 to bottom 本来就跟我们的意
图一致，于是就省略了。最后，我们还需要把 background-size 的值颠倒
一下，原因应该不用多说了吧：

background: linear-gradient(to right, /* 或 90deg */ 图 2-28
#fb3 50%, #58a 0); 我们的垂直条纹。上图：还没有
background-size: 30px 100%; 平铺展开的单个贴片；下图：平
铺得到的条纹图案
试一试 play.csssecrets.io/vertical-stripes

斜向条纹

在完成了水平和垂直条纹之后，我们可能会顺着往下想：如果我们再次
改变 background-size 的值和渐变的方向，是不是就可以得到斜向（比如
45°）的条纹图案呢？比如这样（结果如图 2-29 所示）：
图 2-29
我们对于斜向条纹的首次尝试失
background: linear-gradient(45deg,
败了

5 条纹背景 29

඀ࠡ JOEC