我相信你肯定也遇到过条纹需求，某天，我接到一个需求，图示：3663
看到斜线条纹了吗？如果放到之前，我会毫不犹豫的将它导出含有4条条纹的贴布，为JPG然后平铺，而今我们有了linear-gradient大法，可以渲染很多你想要的渐变。那这个想下如果用渐变来写，我们该怎么做呢？
…… ……
先来回忆一下linear-gradient的语法
linear-gradient( top, #ccc, #000);
参数：其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
想到用渐变然后将渐变更换角度，try it 然后自行渲染看下, 你会回来给我点赞的。
background: linear-gradient(-45deg, #e7e7e7 25%, #f5f5f4 0, #f5f5f4 50%, #e7e7e7 0, #e7e7e7 75%, #f5f5f4 0);
background-size: 42px 42px;
重复线性完美的适用于背景效果，这点得益于它无限循环的天赋，一个渐变图案可以自动重复并且铺满整个背景，因此我们不用再去操心如何创建出贴片无缝拼接了。
还有一种特别酷的方法，有一些场景下我们想要的图案并不是由差异极大的颜色组成，往往会是同一色系，只是在明暗上稍有差别，视觉体现出来会很柔和，这个时候可以将最深的颜色做为背景色，然后将半透明的同色系的条纹叠加在背景色之上，从而得到深浅条纹。来看下代码：
background: repeating-linear-gradient(45deg, #79b, #79b 15px, #58a 0px, #58a 30px);
