斜向条纹

斜向条纹

在前面我们已经实现过CSS条纹背景，利用前面的方法，想要实现60°，30°或者其他角度的斜向条纹是非常困难的。这里我将介绍更加灵活的实现斜向条纹的方式。

repeating-linear-gradient()

repeating-linear-gradient是css3背景色的一个新属性：重复渐变，可以非常容易的实现隔行变色的效果。它的工作方式与linear-gradient 是相似的，但它的色标是无限循环重复的，直至填满整个背景。
语法

background:repeating-linear-gradient(direction,color-stop1,color-stop2,...);

参数

• direction ：渐变的方向，可以是角度值，也可以是方向。 使用角度时，渐变的方向是“to top”方向，然后按照顺时针旋转角度，可用的单位有deg、rad、grad或turn。或使用渐变的方向(top、right、bottom、left、left top、top right、bottom right或者left bottom）

• repeating-linear-gradient的color-stop和linear-gradient中的color-stop参数用法相同，支持两个值，第一个是color颜色值，第二个是color的length值（不允许负值）或百分比，为可选值。

利用repeating-linear-gradient 实现下图所示的渐变斜向条纹

css代码：

background:repeating-linear-gradient(45deg,#fb3 0, #fb3 30px,
         #58a 0, #58a 60px, 
         yellowgreen 0, yellowgreen 90px, 
         rgb(129, 189, 189) 0 , rgb(129, 189, 189) 120px);

相比使用linear-gradient 实现斜向条纹，利用repeating-linear-gradient 实现有三个明显的优点：
1. 减少了重复，在改动任何颜色的时候可以减少修改的次数
2. 我们可以直接在渐变的色标中指定长度，这些长度是在渐变轴 上进行度量的，直接代表了条纹自身的宽度，不需要使用background-size 计算得出宽度。
3. 最重要的一个优点是我们可以随意指定斜向条纹的角度，不需要在考虑贴片无缝拼接的问题了

Tip:
在创建双色水平条纹和垂直条纹时，建议使用之前的方式，使用repeating-linear-gradient 的方式来实现斜向条纹或多色条纹。我们也可以将repeating-linear-gradient 和background-size 结合起来使用