下面我們來試試：
1、等寬條紋
background-image: linear-gradient(0deg,red 50%,green 50%);
background-size: 100% 20px;
2、不等寬條紋
利用上述同樣的方法，只需要調整調整色標的位置值即可。
background-image: linear-gradient(0deg,red 70%,green 70%);
background-size: 100% 20px;
background-image: linear-gradient(0deg,red 70%,green 0);
background-size: 100% 20px;
效果如下：
3、三色條紋圖案
4、垂直條紋
垂直條紋很簡單，和上面水平條紋類似，修改漸變的方向即可。
5、斜向條紋
background-image: linear-gradient(45deg,red 50%,green 0);
background-size: 40px 40px;
那麼有什麼好的方法我們來實現呢？
而我們這裡的單位如下：
我們可以根據勾股定理計算出我們需要的寬度
6、更靈活的斜向條紋
上面的斜向條紋只是針對45度的，那如果是其他的角度，我們應該怎麼做呢？
我們可以利用repeating-linear-gradient()來實現。
我們可以隨意改變角度，並且不用去計算條紋寬度的大小，再也沒有煩人的根號二，而且修改顏色也只用修改兩處，不用像上面那樣麻煩。
7、靈活的同色系條紋
有時候，我們需要是想顏色差異並不是很大的條紋，簡單通過透明度來改變實現。
用上面方法實現：
background-image: repeating
-linear
-gradient(60deg,rgba(0,94,93,1),rgba(0,94,93,1) 15px,rgba(0,94,93,0.5) 0,rgba(0,94,93,0.5) 30px);
如果要修改，那麼我們要同時修改四個地方的顏色，有沒有更簡潔的方法呢？
幸運的是，有這個方法，我們把深色的指定為背景色，同時把白色的半透明色的條紋疊加在背景上得到淺色的條紋。
background: #005e5d;
background-image: repeating-linear-gradient(60deg,hsla(0,0
%,100
%,0.5),hsla(0,0
%,100
%,0.5) 15px,transparent 0,transparent 30px);
我們只需要在乙個地方修改顏色；
對於不支援漸變的瀏覽器提供了回退的作用；
具有透明區域的多個漸變圖案可以構造出非常複雜的圖案。
下篇見。
本文參考與《css揭秘》一書。
CSS揭秘 條紋背景
不管是線性漸變，還是徑向漸變。它們都是用來設定元素的背景影象。background image屬性可以為乙個元素設定乙個或者多個背景影象。這些影象在繪製過程中，以z方向堆疊的方式進行，也就是先指定的影象會在後指定的影象上面繪製，也就越接近使用者。元素的border會在背景影象之上繪製 別忘了前面講的...
CSS揭秘之《條紋背景》
先來說說漸變吧 background linear gradient fb3 20 58a 80 效果圖如下所示 也就是說真正的漸變只出現在容器 60 從20 到80 的高度區域 如果把兩個色標合在一起，會怎樣呢 w3c是這樣規定的 如果多個色標具有相同的位置，它們會產生乙個無限小的過渡區域，過渡的...
CSS揭秘 5 條紋背景（上）
垂直條紋 背景知識 css線性漸變，background size background linear gradient red,yellow,blue background linear gradient red 0 yellow 50 blue 100 background linear gra...