利用纯CSS实现条纹背景

原理：
1. 如果多个色标具有相同的位置，他们会产生一个无限小的过渡区域，从效果上看，颜色会从这个位置突然变化，而不是一个平滑的过程。
2. linear-gradient() 函数用于创建一个表示两种或者多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型，因此我们可以通过background-size来控制渐变的大小。
3. 如果某个色标的位置值比整个列表中在它之前的色标的位置小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。（见示例2）

下面我们来试试：

1、等宽条纹

background-image: linear-gradient(0deg,red 50%,green 50%);
background-size: 100% 20px;

效果如图：

2、不等宽条纹

利用上述同样的方法，只需要调整调整色标的位置值即可。

background-image: linear-gradient(0deg,red 70%,green 70%);
background-size: 100% 20px;

根据原理的第三条，我们也可以这样写，效果相同。

background-image: linear-gradient(0deg,red 70%,green 0);
background-size: 100% 20px;

我们把第二个位置设置为0，那它的位置就会被浏览器调整为前一个色标的位置值，这个结果正是我们想要的，而且如果要修改条纹宽度时，不用同时修改多个值。

效果如下：

3、三色条纹图案

background-image: linear-gradient(0deg,red 30%,green 0,green 60%,yellow 0);
background-size: 100% 20px;

4、垂直条纹

垂直条纹很简单，和上面水平条纹类似，修改渐变的方向即可。

background-image: linear-gradient(90deg,red 30%,green 0,green 60%,yellow 0);
background-size: 40px 100%;

5、斜向条纹

background-image: linear-gradient(45deg,red 50%,green 0);
background-size: 40px 40px;

如果我们只是修改角度，那么我们得到的是这样的，显然并不是我们需要的斜向条纹。

那么有什么好的方法我们来实现呢？

background-image: linear-gradient(45deg,red 25%,green 0,green 50%,red 0,red 75%,green 0);
background-size: 40px 40px;

而我们这里的单位图片如下：

我们可以根据勾股定理计算出我们需要的宽度

6、更灵活的斜向条纹

上面的斜向条纹只是针对45度的，那如果是其他的角度，我们应该怎么做呢？
我们可以利用repeating-linear-gradient() 来实现。

background-image: repeating-linear-gradient(45deg,red,red 15px,green 0,green 30px);

我们可以随意改变角度，并且不用去计算条纹宽度的大小，再也没有烦人的根号二，而且修改颜色也只用修改两处，不用像上面那样麻烦。

7、灵活的同色系条纹

有时候，我们需要是想颜色差异并不是很大的条纹，简单通过透明度来改变实现。
用上面方法实现：

background-image: repeating-linear-gradient(60deg,rgba(0,94,93,1),rgba(0,94,93,1) 15px,rgba(0,94,93,0.5) 0,rgba(0,94,93,0.5) 30px);

效果：

如果要修改，那么我们要同时修改四个地方的颜色，有没有更简洁的方法呢？
幸运的是，有这个方法，我们把深色的指定为背景色，同时把白色的半透明色的条纹叠加在背景上得到浅色的条纹。

background: #005e5d;
background-image: repeating-linear-gradient(60deg,hsla(0,0%,100%,0.5),hsla(0,0%,100%,0.5) 15px,transparent 0,transparent 30px);

这样做有三个好处：

我们只需要在一个地方修改颜色；
对于不支持渐变的浏览器提供了回退的作用；
具有透明区域的多个渐变图案可以构造出非常复杂的图案。

下篇见。

本文参考与《CSS揭秘》一书。