一、橫向條紋
如下代碼：
上面代碼表示整個(gè)圖片的上部分20%和下部分20%是對(duì)應(yīng)的純色，只有中間的部分是漸變色。如果讓中間的部分逐漸縮小，當(dāng)中間部分變?yōu)?即上下兩種顏色的七點(diǎn)和終點(diǎn)相同是，就沒有了漸變而變成了兩種顏色的色條:
接下來可以通過設(shè)置背景的大小，讓背景高度變小并且背景默認(rèn)為repeat，從而出現(xiàn)條紋狀
我們可以不設(shè)定第二個(gè)顏色的起始位置，設(shè)置為0，則瀏覽器默認(rèn)為接著上一個(gè)顏色開始：
這樣就形成了一個(gè)黃色占30%藍(lán)色占70%的條紋狀背景
也可以設(shè)置多種顏色，下面設(shè)置了三種顏色的條紋：
二、豎向條紋
只需要在linear-gradient方法中加一個(gè)前綴即可。注意還需顛倒background-size長(zhǎng)寬的設(shè)定
三、斜向條紋
可以通過修改background-size的值以及為linear-gradient添加角度來實(shí)現(xiàn)斜向的條紋：
background: linear-gradient(45deg, #fb3 50%, #58a 0); //讓背景的漸變帶有傾斜
background-size:30px 30px; //每一塊小組成部分固定寬度和高度
但這樣做的結(jié)果是只會(huì)形成一小塊一小塊的斜線，而不是整體div的斜線，我們需要以四個(gè)小div為一組繪制斜線，添加linear-gradient中的顏色分解：
