最近在看css一姐的《CSS SECRETS》，收获很多，墙裂推荐给大家。文中的很多技巧也来自于一姐~
条纹背景在生活中算是一个比较常见的事物，比如地板，包装纸等。这种设计在网页中要如何实现呢？
我们首先应该知道linear-gradient属性中颜色后是可以加length或者percentage参数的，表示渐变的起止点，这意味着什么呢？
background: linear-gradient(greenyellow 30%,#58a 60%)
如下效果:
linear_gradient_test.png
可以看到，渐变的区域已经很小了。
那么如果起止点的值相等呢？！
没错，如果起止点相等，那么渐变区域就消失了
background: linear-gradient(greenyellow 30%,#58a 30%)
linear_gradient_test2.png
如此，图像有了，按照我们背景图片重复渲染的思维，把这个图像当做贴片进行渲染，即配合上background-size属性，也就实现了条纹:
background: linear-gradient(greenyellow 50%,#58a 50%);
background-size:100% 30px;
strip_bg_01.png
三色也是可以的，只需要继续在linear-gradient后添加属性即可：
background: linear-gradient(greenyellow 33.3%,#58a 33.3%,#58a 66.6%,red 66.6%);
background-size:100% 30px；
目前为止我们每次修改各条纹宽度的占比都需要修改2个值，这里有一个小技巧，把后者设置为0。它基于一个CSS规范，如果某个色标的位置值比列表中它之前色标的位置值都小，则该色标的位置值会被设置为之前色标位置值的最大值。
上面的三色条纹可改写为：
background: linear-gradient(greenyellow 33.3%,#58a 0,#58a 66.6%,red 0);
background-size:100% 30px；
垂直条纹
有了之前的铺垫，垂直条纹对你来说应该就很简单了。只需要改变渐变的方向，然后再修改一下background-size的值就可以了。
background: linear-gradient(to left, greenyellow 50%,#58a 0);
background-size:30px 100%;
vertical_strip.png
斜向条纹
上面的方式用来实现斜向的条纹就比较困难了。你可能会想，为什么会麻烦呢？修改linear-gradient的方向不就行了吗？像这样:
background:linear-gradient(45deg,greenyellow 50%,#58a 50%);
background-size:42px 42px;
first_try.png
很明显我们失败了。但是可以看出这个条纹是可控的，上面我们也说过，linear-gradient生成的是图片，我们将之当作贴片，那么怎样的贴片可以拼出斜向条纹呢？
这样:
strip_card.png
于是我们可以修改代码为：
background:linear-gradient(45deg,greenyellow 25%,#58a 0,#58a 50%,
greenyellow 0,greenyellow 75%,#58a 0);
background-size:42px 42px;
italic_strip.png
这样的实现方式其实有很大的缺陷，比如如果我们想实现一个倾斜60度的斜向条纹，你可以试试，它就无能为力了。
当然，我既然说出来了，自然就有其它的解决方案。
linear-gradient拥有一个循环加强版本=>repeating-linear-gradient。它和前者的不同在于，色标将会无限循环重复。
比如这样一句代码:
background:repeating-linear-gradient(#fff,#000 30px);
它相当于：
background:linear-gradient(#fff,#000 30px,
#fff 30px,#000 60px,
#fff 60px,### 90px,
...)
加一个角度：
background:repeating-linear-gradient(60deg,#fff,#000 30px);
repeating_italic_try.png
很棒，我们快要接近正确答案了，现在只需要把我们之前消除渐变的技巧加入即可：
background:repeating-linear-gradient(60deg,greenyellow, greenyellow 15px,
#58a 0,#58a 30px);
background-size:42px 42px;
见证奇迹吧：
italic_strip_final.png
这种方法最大的优势是现在我们可以随意修改条纹的角度了，而且修改方式非常清晰简单。
还有个补充，有时候其实渐变的颜色间可能是相同颜色明暗差异，即同色系，这样的情况我们用上面的方法要写两个颜色，很明显不是最好的解决方案。我们可以通过在背景色上渲染条纹式的半透明的白色条纹来实现：
background:#58a;
background-image: repeating-linear-gradient(60deg,rgba(255,255,255,.1),rgba(255,255,255,.1) 15px,
transparent 0,transparent 30px);
same_color_strip.png
网友评论