在我们开发中，经常会有各种尺寸、颜色、角度的条纹图案需要实现，

以前，我第一个想到的就是用无序列表添加元素，再去控制不同颜色，这样再改动的时候就太麻烦，根本不够 DRY，而用线性渐变的方法就会简单很多。

简单线性渐变的实现：

把两个色标拉近：

可以看到，顶部 20% 区域和底部 20% 区域都是实色，如果继续拉近这个距离，可以看到中间的渐变越来越窄，直到这个两个色值都占到 50%，也就是重合了，就看不到中间的渐变效果。

如果多个色标具有相同的位置，会产生一个无限小的过渡区 ，过渡的起止色分别是第一个和最后一个指定值。从效果看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程。

—— CSS 图像 （第三版）

渐变是一种由代码生成的图像，因此可以像背景图那样去使用：

可以用相同方法实现不等宽的条纹：

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。

—— CSS 图像 （第三版）

从规范中，可以看到我们只需要把后面的值设置为 0，就肯定会比前面的值小，这样就可以被浏览器自动调整为前面色标的数值了。

如果要实现超过两种颜色的条纹，也可以同样实现：

水平条纹是默认的方向（ to bottom 是渐变默认值），我们也可以去更改渐变的方向来实现垂直条纹：

需要记得把 background-size 的值也要换一下位置。

在实现了上述两种条纹，会想到改变渐变方向和 background-size 的值是不是也可以得到斜向的条纹：

实际效果我们也看到，是行不通的原因就是只是每个贴片内去改变了渐变方向，而不是把整个的背景一起改变的方向，可以使用 background-repeat: no-repeat 看到效果。

因此我们需要每个贴片中要有四条条纹才能实现每个贴片的无缝拼接，两条是根本做不到这个效果：

这样就可以实现斜向条纹，但是这个条纹看起来会比前面水平和垂直的条纹要细一些，这个也是需要通过勾股定理去计算，才能得到我们想要的宽度，当前的宽度就是 15/√2px ，这大小大概就是 10.6 ，而我们想要的是 15，这个就需要再去计算出这个贴片的边长，一个贴片斜边长度 60（4 个宽度 * 15），这样边长就是 60/√2 ，这个值大约就等于 42.4，我们取整写成 42px 就可以了，因为 √2 不是整数，所以不管写多少都是一个近似值。

前面实现的斜向条纹就很不灵活，每次都需要我们去计算贴片的边长，甚至不是 45° ，而是 60° 或者 30 °，这样结果就很难把控。

这里可以有更好的实现方式，liner-gradient() 和 radial-gradient() 还有一个循环式的写法：repeating-liner-gradient() 和 repeating-radial-gradient() 。这种写法和前者只有一点不同，色标是无限循环重复的，直到填满整个背景。

这样我们就可以得到相同的效果，而且也不需要再进行长度计算，而且代码也更少，修改的地方也更少。而这些还不是最大的好处，最大的好处是角度更改，我们可以随便更改角度，像 60° 的斜向条纹：

简单到只需要更改角度。在处理 45° 条纹，还可以把这种方法和前面的方法进行结合：

这样我们改动的也只有贴片的边长就可以了。

大多数情况下，需要得到的条纹图案都是同色系的，并不是差异很大的那种，只是在明度有轻微的差异。

可以看到，条纹是由一个主色调（#58a）和它的浅色变体组成的。这样在颜色改变，我们就需要改动四处。

我们可以换一种实现方案，不再为每种条纹单独设定颜色，而是把主色直接设置成背景色，同时把半透明白色的条纹叠加上去来得到浅色条纹。

可以看到和上面展示效果是一样的，而在修改上，我们只需更改背景色一个地方即可。

浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端！！！！！ 欢迎大家来聊，有意向可发送简历到 [email protected]，加入我们，可以一起进步，一起聚餐，一起旅游，让我们从世界村的小伙伴变成大华村的小伙伴。