条纹带来的美感那是不言而喻的。都说“胖子穿横条纹，瘦子穿竖条纹好看”，就能证明人们对条纹的掌控力到达了什么程度。在二次元条纹那也是十分的抢眼球啊，例如我们的舰娘岛风同学。最搞不明白的就是人们的审美是如何产生的，一会流行这，一会流行那的。搞的是一脸懵逼……
随着前端技术的发展，各种标准也日益成熟。以前不敢想象的一些效果，也可以直接用纯CSS来实现了。例如这个线性渐变linear-gradient，在相当古老的过去要想实现这个效果，我们不得不借助图片或者是滤镜才能完成这项“壮举”。现在有相应的技术可以不借助图片也能轻松的实现相应的效果。通常全局考虑的掣肘限制，让我们在一些应用场景中不得不抛弃新技术，继续保持着我们使用图片的“传统”。
虽然说这样也能便捷的达到我们想要的结果，但这对于喜欢追求刺激挑战和自我完善的“敏而好学”的我们来说，多少有点让人不爽！不可否认的是，所有醉心沉浸于技术世界的人们多少都有技术妄想症。
书归正传，在网页中条纹的实现有很多种方式，其中相当一大部分的方案都是使用图片来完成构想。这篇文章所叙述的就是用早已不新鲜的CSS3属性linear-gradient来制作出漂亮的条纹。
关于linear-gradient这货的基础知识在网上一搜就能出来一大片。例如老式写法，私有前缀等等知识点就不在这里浪费篇幅了，本文假设你已经具备了线性渐变的知识，我们“直捣黄龙”说重点。
/*线性渐变*/
background:linear-gradient( #19C,#c60);
上面的代码会让我们得到一个由蓝到橙的渐变，如下图。
如果我们拉近（设置）两个色标的位置，那么会得到渐变局域更窄的效果。
/*调整色标之后的线性渐变*/
background:linear-gradient( #19C 20%,#c60 80%);
如果我们继续拉近两个色标的位置并让两个色标重合在一起会发生些什么？
/*调整色标至重叠的线性渐变*/
background:linear-gradient( #19C 50%,#c60 50%);
两个色标重合我们就得到了条纹
从图中我们可以看到，当线性渐变的两个色标重合之后，我们就看不到任何渐变效果，只剩下两块各占一半面积的纯色，实际上我们可以理解为我们已经得到了两条水平条纹。这是什么原理？规范早已经给我们做好了理论支撑，出现这种情况的原理就是以下原因：
If the distance between the first and last color-stops is non-zero, but is small enough that the implementation knows that the physical resolution of the output device is insufficient to faithfully render the gradient, the implementation must find the average color of the gradient and render the gradient as a solid-color image equal to the average color.
If the distance between the first and last color-stops is zero (or rounds to zero due to implementation limitations), the implementation must find the average color of a gradient with the same number and color of color-stops, but with the first and last color-stop an arbitrary non-zero distance apart, and the remaining color-stops equally spaced between them. Then it must render the gradient as a solid-color image equal to that average color.
—-CSS Image Values and Replaced Content Module Level 3
(https://www.w3.org/TR/css3-images/)
一大片让人头疼的英文，没事~蹩脚的翻译立马送上：
大致意思：
如果色标之间距离过小，小到显示器分辨率无法显示，或者是图标位置重叠。那么色标之间就会产生一个无限小的过渡区域，过渡的起止颜色分别是第一个和最后一个指定的色值。颜色会在那个位置上突然发生变化，而不是有一个平滑的渐变过程。效果上就是渐变的区间就是由纯色填充。
通过对规范和原理的学习理解，我们就可以制作漂亮的条纹了，不过这只是原始的雏形，还不是很完美，我们并不能很好的控制条纹的效果。我们可以尝试加入其它的手段来加深对代码的控制力。
由于渐变是一种由代码生成的图像，我们可以像对待其他背景图像一样去对待它，也就是说我们可以通过background-size来调整其尺寸。关于这货的知识，这里也假定你已经全部掌握不再啰嗦。这里面多一句嘴，强调下，为了节省时间(其实是懒)之后出现在demo中的CSS代码我不会再添加私有前缀。有关这货的私有前缀的问题。我直接放出私有前缀的形式，看以下的代码:
/*关于background-size的私有前缀Demo*/
.ClassName{
-webkit-background-size : 60% 80%;
-moz-background-size : 60% 80%;
-o-background-size : 60% 80%;
background-size : 60% 80%;
}
在上面蓝色和橙色形成的条纹中，我们可以通过background-size来控制条纹尺寸，由于background-repeat:repeat;默认，导致背景是重复平铺的。为了能看的清晰，我们调整background-repeat:no-repeat;并给区域添加边框。我们就能很明显的感受到受控制的两种不同颜色条纹。条纹所占高度是30px宽度是100%。
/*HTML*/
/*CSS*/
#test{
border:thin dashed #c0c0c0;
width:500px;
height:120px;
background:linear-gradient( #19C 50%,#c60 50%);
background-size:100% 30px;
background-repeat:no-repeat;
}
当我们把background-repeat:no-repeat;删除或是修改为默认值，那么我们就会得到平铺的漂亮条纹了。
我们还可以通过调整色标的位置来创建不等宽的条纹，同时也能通过修改background-size来调整条纹整体的宽度或者高度。例如以下的代码效果：
/*CSS*/
#test{
border:thin dashed #c0c0c0;
width:500px;
height:150px;
background:linear-gradient( #19C 30%,#c60 30%);/*看这里*/
background-size:100% 50px;
}
有时候不规则也是一种美，我们的不等宽条纹随着我们代码的敲入，也被浏览器忠实的展现出来。如果我们要改动条纹宽度的时候，需要修改两处色标的值。这个有点麻烦，我们可以手懒但是脑子千万不能懒，有什么办法可以让我们偷懒吗？规范是个好东西，里面应该有我们想要的。
If a color-stop has a position that is less than the specified position of any color-stop before it in the list, set its position to be equal to the largest specified position of any color-stop before it.
—-CSS Image Values and Replaced Content Module Level 3
(https://www.w3.org/TR/css3-images/)
好吧，让人蛋疼的英文又出现了……蹩脚的翻译也要出现了：
大致意思：
如果某个色标的位置值比整个列表中在它之前的色标位置值都小，则该色标的位置值会被设置为它前面所有色标位置中的最大值。
有点像绕口令，很好理解，想象一条线段上面有一能移动的色标，按照自我规定的正方向来看，在位置值上肯定是后面的比前面的大，如果后面的比前面的还小，那么肯定是前面当中最大的一个，因为重合在一起了么。
这规定就有意思了啊，意味着，如果我们第二个色标的位置值设为零，那它的位置总会被浏览器调整为前一个色标的位置值，哈哈！我们只需要调整前面的色标这一处，就等于调整了两个色标值，这正是我们想要的。
//色标值替换
background:linear-gradient( #19C 30%,#c60 0);
background-size:100% 50px;
结果看起来和上面是一模一样的，也是不等宽的条纹，这样我们只需要调整一出就能得到不等宽条纹，听哥一句，懒有时候真不是坏事。
掌握了以上只是，我们要创建超过两种颜色的条纹，也是轻而易举的事情了。下面来创建三种颜色的水平条纹，注意看我代码中色标的位置。
/*多色条纹*/
background:linear-gradient(#19C 30%,#c60 0,#c60 60%,#EAC 0);
background-size:100% 50px;
效果图：
嗯嗯~ 发挥自己的想象力来作出更多的条纹吧。你觉得到这里就应该结束了么？嘿嘿嘿~前面只是入门！
前面我们所创造的都是水平条纹，如果我们想做垂直的条纹该如何实现呢？从技术上来讲，实现垂直条纹的代码和水平条纹的代码几乎一模一样。差别主要是在开头加上一个额外的参数来指定渐变的方向。由于改变了方向我们的background-size也需要调整参数的位置。注意看我代码中的差异。
/*垂直条纹*/
background:linear-gradient(to right, #19C 50%,#c60 0); /*这里添加了参数*/
background-size:50px 100%;
/* to right还可以改成 90deg */
最终结果：
简单的条纹已经搞定，可能你会继续深入，如果我们调整不同的角度，是不是就可以得到任意方向的条纹了呢？可以自己试验一下。本来在本文想要一次性全部介绍完，猛然回头发现篇幅已经很长了，所以还是分拆成两篇文章来介绍吧。如果你迫不及待的想看下一篇，那么就点击链接《漂亮条纹炼成笔记进阶篇》。
