最近在看css一姐的《CSS SECRETS》蝙泼，收獲很多谣辞，墻裂推薦給大家迫摔。文中的很多技巧也來自于一姐~

條紋背景在生活中算是一個比較常見的事物，比如地板泥从，包裝紙等句占。這種設(shè)計在網(wǎng)頁中要如何實現(xiàn)呢？
我們首先應(yīng)該知道linear-gradient屬性中顏色后是可以加length或者percentage參數(shù)的躯嫉，表示漸變的起止點纱烘，這意味著什么呢？

background: linear-gradient(greenyellow 30%,#58a 60%)

如下效果:

linear_gradient_test.png

可以看到祈餐，漸變的區(qū)域已經(jīng)很小了擂啥。

那么如果起止點的值相等呢？帆阳！
沒錯哺壶，如果起止點相等，那么漸變區(qū)域就消失了

background: linear-gradient(greenyellow 30%,#58a 30%)

linear_gradient_test2.png

如此舱痘，圖像有了变骡，按照我們背景圖片重復(fù)渲染的思維离赫，把這個圖像當(dāng)做貼片進行渲染芭逝，即配合上background-size屬性，也就實現(xiàn)了條紋:

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

strip_bg_01.png

三色也是可以的渊胸，只需要繼續(xù)在linear-gradient后添加屬性即可：

background: linear-gradient(greenyellow 33.3%,#58a 33.3%,#58a 66.6%,red 66.6%);
background-size:100% 30px旬盯；

目前為止我們每次修改各條紋寬度的占比都需要修改2個值，這里有一個小技巧翎猛，把后者設(shè)置為0胖翰。它基于一個CSS規(guī)范，如果某個色標(biāo)的位置值比列表中它之前色標(biāo)的位置值都小切厘，則該色標(biāo)的位置值會被設(shè)置為之前色標(biāo)位置值的最大值萨咳。
上面的三色條紋可改寫為：

background: linear-gradient(greenyellow 33.3%,#58a 0,#58a 66.6%,red 0);
background-size:100% 30px；

垂直條紋

有了之前的鋪墊疫稿，垂直條紋對你來說應(yīng)該就很簡單了培他。只需要改變漸變的方向，然后再修改一下background-size的值就可以了遗座。

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

vertical_strip.png

斜向條紋

上面的方式用來實現(xiàn)斜向的條紋就比較困難了舀凛。你可能會想，為什么會麻煩呢途蒋？修改linear-gradient的方向不就行了嗎猛遍？像這樣:

background:linear-gradient(45deg,greenyellow 50%,#58a 50%);
background-size:42px 42px;

first_try.png

很明顯我們失敗了。但是可以看出這個條紋是可控的，上面我們也說過懊烤，linear-gradient生成的是圖片梯醒，我們將之當(dāng)作貼片，那么怎樣的貼片可以拼出斜向條紋呢腌紧？
這樣:

strip_card.png

于是我們可以修改代碼為：

background:linear-gradient(45deg,greenyellow 25%,#58a 0,#58a 50%,
                            greenyellow 0,greenyellow 75%,#58a 0);
background-size:42px 42px;

italic_strip.png

這樣的實現(xiàn)方式其實有很大的缺陷冤馏，比如如果我們想實現(xiàn)一個傾斜60度的斜向條紋，你可以試試寄啼，它就無能為力了逮光。

當(dāng)然，我既然說出來了墩划，自然就有其它的解決方案涕刚。
linear-gradient擁有一個循環(huán)加強版本=>repeating-linear-gradient。它和前者的不同在于乙帮，色標(biāo)將會無限循環(huán)重復(fù)杜漠。
比如這樣一句代碼:

background:repeating-linear-gradient(#fff,#000 30px);

它相當(dāng)于：

background:linear-gradient(#fff,#000 30px,
            #fff 30px,#000 60px,
            #fff 60px,### 90px,
            ...)

加一個角度：

background:repeating-linear-gradient(60deg,#fff,#000 30px);

repeating_italic_try.png

很棒，我們快要接近正確答案了察净，現(xiàn)在只需要把我們之前消除漸變的技巧加入即可：

background:repeating-linear-gradient(60deg,greenyellow, greenyellow 15px,
            #58a 0,#58a 30px);
background-size:42px 42px;

見證奇跡吧：

italic_strip_final.png

這種方法最大的優(yōu)勢是現(xiàn)在我們可以隨意修改條紋的角度了驾茴，而且修改方式非常清晰簡單。

還有個補充氢卡，有時候其實漸變的顏色間可能是相同顏色明暗差異锈至，即同色系，這樣的情況我們用上面的方法要寫兩個顏色译秦，很明顯不是最好的解決方案峡捡。我們可以通過在背景色上渲染條紋式的半透明的白色條紋來實現(xiàn)：

background:#58a;
background-image: repeating-linear-gradient(60deg,rgba(255,255,255,.1),rgba(255,255,255,.1) 15px, 
                    transparent 0,transparent 30px);

same_color_strip.png