一、橫向條紋
如下代碼：

CSS Code復制內容到剪貼板

background: linear-gradient(#fb3 20%, #58a 80%)  

上面代碼表示整個圖片的上部分20%和下部分20%是對應的純色，只有中間的部分是漸變色。如果讓中間的部分逐漸縮小，當中間部分變為0即上下兩種顏色的七點和終點相同是，就沒有了漸變而變成了兩種顏色的色條:

CSS Code復制內容到剪貼板

background: linear-gradient(#fb3 50%, #58a 50%);  

接下來可以通過設置背景的大小，讓背景高度變小并且背景默認為repeat，從而出現條紋狀

CSS Code復制內容到剪貼板

background: linear-gradient(#fb3 50%, #58a 50%);   
background-size: 100% 30px;  

我們可以不設定第二個顏色的起始位置，設置為0，則瀏覽器默認為接著上一個顏色開始：

CSS Code復制內容到剪貼板

background: linear-gradient(#fb3 30%, #58a 0);   
background-size:100% 30px;  

這樣就形成了一個黃色占30%藍色占70%的條紋狀背景
也可以設置多種顏色，下面設置了三種顏色的條紋：

CSS Code復制內容到剪貼板

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);   
background-size: 100% 45px;  

 
二、豎向條紋
只需要在linear-gradient方法中加一個前綴即可。注意還需顛倒background-size長寬的設定

CSS Code復制內容到剪貼板

background: linear-gradient(to rightright, #fb3 50%, #58a 0);     
background-size:30px 100%;    

三、斜向條紋
可以通過修改background-size的值以及為linear-gradient添加角度來實現斜向的條紋：
background: linear-gradient(45deg, #fb3 50%, #58a 0);    //讓背景的漸變帶有傾斜
background-size:30px 30px;   //每一塊小組成部分固定寬度和高度
但這樣做的結果是只會形成一小塊一小塊的斜線，而不是整體div的斜線，我們需要以四個小div為一組繪制斜線，添加linear-gradient中的顏色分解：

CSS Code復制內容到剪貼板

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);     
background-size:30px 30px;    

四、使用repeat-linear-gradient
對于斜線的背景繪制，使用repeat-linear-gradient方法更有效。使用該方法的時候，設置的顏色變化會自動進行重復直到鋪滿整個div。實例代碼如下：

CSS Code復制內容到剪貼板