条纹效果如下所示：
条纹效果示例.png
在CSS中，条纹效果的应用还是很广泛的，比如：条纹背景、网格效果、棋盘格效果等等；
条纹效果的特点就是：多个颜色条交替排列，相邻颜色条之间的过渡是突变的效果；
所以，可以用颜色突变的方案来实现条纹效果；
根据我的《CSS中颜色突变的实现方案》，有如下方案可实现条纹效果：
备注：
如果没有看过我的《CSS中颜色突变的实现方案》，建议先看下，然后再来看这篇文章；
方案1：多个元素组合
这个方案的思路比较直观，就是每个颜色条用一个元素显示；由于过于简单，在此就不再讲解；
此方案优点：
- 原理直观，易理解；
- 可以实现任意多颜色的条纹效果；
此方案缺点：
- 添加了较多冗余的元素；
方案2：多色条纹
这个方案是通过 《CSS中颜色突变的实现方案》/方案2-插入颜色渐变辅助色标 实现条纹效果的，由于条纹往往是交替重复出现的，所以最好用重复线性渐变函数repeating-linear-gradient() 来实现；
以实现红、绿、蓝3个颜色的水平条纹效果为例：
示例代码：
background-image: repeating-linear-gradient(red 0%, red 10%, green 10%, green 20%,blue 20%,blue 30%);
示例效果：
红绿蓝条纹效果.png
此方案的优点：
- 用单个元素实现，不用添加冗余元素；
- 可以实现任意多颜色的交替重复的条纹；
方案3：双色条纹
方案2可以实现任意多颜色的条纹效果，不过每多一个颜色，需要添加2个色标（其中包含一个辅助色标），但如果只有2种颜色的突变，也可以使用非重复的线性渐变来实现；这个方案是根据《CSS中颜色突变的实现方案》/方案3-非重复的2色渐变 进行扩展的；
具体思路如下：
- 设置background-image的值为非线性渐变linear-gradient(色标1, 色标2);
- 设置background-size为2个条纹的尺寸；
- 设置background-repeat为repeat，以实现条纹的重复排列；
以实现红、蓝2个颜色的水平条纹效果为例：
示例代码：
background-image: linear-gradient(red 50%, blue 50%); //设置背景图片为2色的条纹；
background-size: 100% 20%; //指定背景图片的尺寸；
background-repeat:repeat; //指定背景图片的重复模式；
示例效果：
红蓝条纹效果.png
此方案优点：
- 用单个元素实现，不用添加冗余元素；
- 不用插入辅助色标；
此方案缺点：
- 只能实现2种颜色的条纹；
相关文章:《 CSS中特殊效果的实现方案》
