實(shí)現(xiàn)代碼：
body{
background: #243960;
}
.container {
margin: 200px auto;
width: 500px;
height: 500px;
//關(guān)鍵代碼
background: linear-gradient(45deg,
rgba(0, 153, 68, .5) 0, rgba(0, 153, 68, .5) 25%, transparent 25%, transparent 50%,
rgba(0, 153, 68, .5) 50%, rgba(0, 153, 68, .5) 75%, transparent 75%, transparent);
background-size: 50px 50px;
}
分析：
margin, width, height 這塊自己隨意定義巨双，關(guān)鍵屬性有兩個(gè)——background中的linear-gradient 和 background-size悟耘。
先來linear-gradient,分析其屬性鲤看，總共有9個(gè)屬性
45deg外加8個(gè)后接百分比的顏色值刑棵。
45deg表示條紋傾斜角度几缭，這個(gè)好理解派桩。如果不加這個(gè)屬性腾誉，就成了橫條紋了椭盏，以此90deg就是豎條紋组砚，可以組成花格條紋。
后面8個(gè)屬性掏颊，是由一個(gè)rgba顏色值和transparent外加百分比組成糟红。
rgba顏色值是條紋的顏色，transparent其實(shí)也是顏色乌叶，不過是繼承自父級(jí)的改化，而這里的父級(jí)顏色就是body的背景色（在這塊代碼里可以理解為無色透明≈rgba(0,0,0,0)）。
而百分比也比較好理解枉昏，不過需要串起來讀：
0-25% 是 條紋色
25%-50% 是 父級(jí)顏色
50%-75% 是 條紋色
75%-100% 是 父級(jí)顏色
這里的細(xì)節(jié)最后一個(gè)transparent后沒接百分比其實(shí)是表示transparent 1陈肛，也就是100%了。注：如果沒有寫角度屬性兄裂，渲染是從top開始的句旱，如果寫的是0deg是從bottom開始的阳藻，角度值增加多少，則渲染開始點(diǎn)順時(shí)針旋轉(zhuǎn)多少谈撒。
按照這個(gè)邏輯腥泥，那我們渲染的圖片應(yīng)該是這個(gè)樣的
其實(shí)關(guān)鍵點(diǎn)是在后面一個(gè)屬性background-size，以及默認(rèn)值為repeat的background-repeat啃匿。
使用background-size: 50px 50px;就把上圖的樣式縮小到了50x50的方格子中蛔外。然后這樣是無法鋪滿500x500的容器，另外background-repeat的默認(rèn)repeat發(fā)揮作用溯乒，把渲染好的50x50方格子平鋪重復(fù)渲染到500x500的容器里面夹厌。就做成了第一張圖的效果。
了解到每個(gè)屬性的作用裆悄，拓展起來就方便多了矛纹，如果要改變斜條紋線條的大小，只需要改變background-size的大小就行了光稼。顏色也不一定要用rgba格式或南，另外如果要做雙色條紋也只需要把transparent改成另外一個(gè)顏色就ok。三色條紋也簡(jiǎn)單
50% ÷ 3 ≈ 16.66%
所以代碼是：
.container {
margin: 200px auto;
width: 500px;
height: 500px;
background: linear-gradient(45deg,
red 0, red 16.66%, #fff000 16.66%, #fff000 33.33%, rgb(0, 0, 255) 33.33%, rgb(0, 0, 255) 50%,
red 50%, red 66.66%, #fff000 66.66%, #fff000 83.33%, rgb(0, 0, 255) 83.33%, rgb(0, 0, 255));
background-size: 50px 50px;
}
