条纹效果如下所示：

条纹效果示例.png

在CSS中，条纹效果的应用还是很广泛的，比如：条纹背景、网格效果、棋盘格效果等等；

条纹效果的特点就是：多个颜色条交替排列，相邻颜色条之间的过渡是突变的效果；
所以，可以用颜色突变的方案来实现条纹效果；

根据我的《CSS中颜色突变的实现方案》，有如下方案可实现条纹效果：

备注：
如果没有看过我的《CSS中颜色突变的实现方案》，建议先看下，然后再来看这篇文章；

方案1：多个元素组合

这个方案的思路比较直观，就是每个颜色条用一个元素显示；由于过于简单，在此就不再讲解；

此方案优点：

1. 原理直观，易理解；
2. 可以实现任意多颜色的条纹效果；

此方案缺点：

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

此方案的优点：

1. 用单个元素实现，不用添加冗余元素；
2. 可以实现任意多颜色的交替重复的条纹；

方案3：双色条纹

方案2可以实现任意多颜色的条纹效果，不过每多一个颜色，需要添加2个色标（其中包含一个辅助色标），但如果只有2种颜色的突变，也可以使用非重复的线性渐变来实现；这个方案是根据《CSS中颜色突变的实现方案》/方案3-非重复的2色渐变 进行扩展的；

具体思路如下：

1. 设置background-image的值为非线性渐变linear-gradient(色标1, 色标2);
2. 设置background-size为2个条纹的尺寸；
3. 设置background-repeat为repeat，以实现条纹的重复排列；

以实现红、蓝2个颜色的水平条纹效果为例：
示例代码：

background-image: linear-gradient(red 50%, blue 50%);   //设置背景图片为2色的条纹；
background-size: 100% 20%;  //指定背景图片的尺寸；
background-repeat:repeat;       //指定背景图片的重复模式；

示例效果：

红蓝条纹效果.png

此方案优点：

1. 用单个元素实现，不用添加冗余元素；
2. 不用插入辅助色标；

此方案缺点：

1. 只能实现2种颜色的条纹；

相关文章:《 CSS中特殊效果的实现方案》