條紋效果如下所示：

條紋效果示例.png

在CSS中，條紋效果的應用還是很廣泛的，比如：條紋背景、網(wǎng)格效果、棋盤格效果等等；

條紋效果的特點就是：多個顏色條交替排列，相鄰顏色條之間的過渡是突變的效果；
所以，可以用顏色突變的方案來實現(xiàn)條紋效果；

根據(jù)我的《CSS中顏色突變的實現(xiàn)方案》，有如下方案可實現(xiàn)條紋效果：

備注：
如果沒有看過我的《CSS中顏色突變的實現(xiàn)方案》，建議先看下，然后再來看這篇文章；

方案1：多個元素組合

這個方案的思路比較直觀，就是每個顏色條用一個元素顯示；由于過于簡單，在此就不再講解；

此方案優(yōu)點：

1. 原理直觀，易理解；
2. 可以實現(xiàn)任意多顏色的條紋效果；

此方案缺點：

1. 添加了較多冗余的元素；

方案2：多色條紋

這個方案是通過 《CSS中顏色突變的實現(xiàn)方案》/方案2-插入顏色漸變輔助色標 實現(xiàn)條紋效果的，由于條紋往往是交替重復出現(xiàn)的，所以最好用重復線性漸變函數(shù)repeating-linear-gradient() 來實現(xiàn)；

以實現(xiàn)紅、綠、藍3個顏色的水平條紋效果為例：
示例代碼：

background-image: repeating-linear-gradient(red 0%, red 10%, green 10%, green 20%,blue 20%,blue 30%);

示例效果：

紅綠藍條紋效果.png

此方案的優(yōu)點：

1. 用單個元素實現(xiàn)，不用添加冗余元素；
2. 可以實現(xiàn)任意多顏色的交替重復的條紋；

方案3：雙色條紋

方案2可以實現(xiàn)任意多顏色的條紋效果，不過每多一個顏色，需要添加2個色標（其中包含一個輔助色標），但如果只有2種顏色的突變，也可以使用非重復的線性漸變來實現(xiàn)；這個方案是根據(jù)《CSS中顏色突變的實現(xiàn)方案》/方案3-非重復的2色漸變 進行擴展的；

具體思路如下：

1. 設置background-image的值為非線性漸變linear-gradient(色標1, 色標2);
2. 設置background-size為2個條紋的尺寸；
3. 設置background-repeat為repeat，以實現(xiàn)條紋的重復排列；

以實現(xiàn)紅、藍2個顏色的水平條紋效果為例：
示例代碼：

background-image: linear-gradient(red 50%, blue 50%);   //設置背景圖片為2色的條紋；
background-size: 100% 20%;  //指定背景圖片的尺寸；
background-repeat:repeat;       //指定背景圖片的重復模式；

示例效果：

紅藍條紋效果.png

此方案優(yōu)點：

1. 用單個元素實現(xiàn)，不用添加冗余元素；
2. 不用插入輔助色標；

此方案缺點：

1. 只能實現(xiàn)2種顏色的條紋；

相關文章:《 CSS中特殊效果的實現(xiàn)方案》