Css linear-gradient线性渐变的应用

在之前的文章《深入理解Css linear-gradient线性渐变》，我们提到了Css的background-image线性渐变，它可以用来做一些条纹背景：

一. 水平条纹背景

当渐变色的色标设置为相同位置时，过渡区域就会变成无限小：

background: linear-gradient(#aaa 50%, #ddd 50%);

再结合background-size 来调整他的尺寸，由于默认情况下背景是重复平铺的，所以得到的效果就是填满水平条纹：

background: linear-gradient(#aaa 50%, #ddd 50%);
background-size: 100% 30px;

如果需要多种颜色的条纹，设置多种颜色渐变即可。

二. 垂直条纹背景

想要生成垂直方向的条纹，只需修改渐变的方向即可（别忘了把 background-size 颠倒一下）：

background: linear-gradient(to right, #aaa 50%, #ddd 0);
background-size: 30px 100%;

注：to right 也可以写成90deg。

三.斜向条纹背景

如果直接修改渐变方向，使其倾斜45°，并且修改 background-size ，会得到下面的效果：

background: linear-gradient(45deg, #aaa 50%, #ddd 0);
background-size: 30px 30px;

注：linear-gradient(45deg, #aaa 50%, #ddd 0);中最后一个色标#ddd 0为什么可以这么写，可以参考之前的文章《深入理解Css linear-gradient线性渐变》。

而我们需要的效果是把整个背景旋转45°，而不是把每个小切片旋转45°。仔细观察会发现，想要通过小切片拼接成完整的斜向条纹，只需将每个切片分割为四份。

4份切片如下：

因此需要新增两个色标：

background: linear-gradient(45deg, #aaa 25%, #ddd 0, #ddd 50%, #aaa 0, #aaa 75%, #ddd 0);
background-size: 30px 30px;

调整 background-size ，增加条纹宽度：

background: linear-gradient(45deg, #aaa 25%, #ddd 0, #ddd 50%, #aaa 0, #aaa 75%, #ddd 0);
background-size: 60px 60px;

此时，条纹宽度比之前变宽：

根据勾股定理，条纹宽度W = 60Math.sqrt(2,2) ,约为21.2，而之前的条纹宽度为15。条纹的宽度如果想和上面的同样设置为15px，那 background-size 就需要根据勾股定理求出准确的值：
当条纹宽度为15，有4个同样的条纹宽度切片，此时L = 154 = 60，那么根据三角函数关系：条纹宽度W / L= Math.sqrt(2,2) ，得到W = 30 * Math.sqrt(2,2) ，约为42.4。由此可见这种方法不够灵活，想要其他倾斜角度的条纹有点麻烦。

想要灵活地实现不同角度的条纹，这时候就需要用到 repeating-linear-gradient() ，重复线性渐变。

所谓的重复线性渐变，就是沿着线性渐变线的两个方向上无线延伸重复。在这里需要注意一点就是，我们在设置渐变色标时应该同时给出其偏移量，否则无法实现重复渐变的效果。

重复线性渐变会循环色标，直到填满整个背景，用它来实现上面的效果：

background: repeating-linear-gradient(45deg, #aaa 0, #aaa 15px, #ddd 0, #ddd 30px);

注：此时不要设置background-size。