不管是線性漸變，還是徑向漸變。它們都是用來設定元素的背景影象。
background-image屬性可以為乙個元素設定乙個或者多個背景影象。這些影象在繪製過程中，以z方向堆疊的方式進行，也就是先指定的影象會在後指定的影象上面繪製，也就越接近使用者。元素的border會在背景影象之上繪製(別忘了前面講的半透明邊框)，元素的background-color會在背景影象之下繪製。
background: linear-gradient(#fb3, #58a);
如果將這兩個色標拉近一點，設定為background: linear-gradient(#fb3 20%, #58a 80%);那麼真正的漸變只會出現在容器中間60%的區域內。如果我們將兩個色標重合在一起，會發生什麼呢？
如果多個色標具有相同的位置，它們會產生乙個無限小的過渡區域，過渡的起止色分別是第乙個和最後乙個指定值。從效果上看，顏色會在那個位置突然變化，而不是乙個平滑的漸變過程。tips:漸變的本質其實是一種通過**生成的影象，所以能夠像對待其他任何背景影象一樣來對待，因此可以通過background-size屬性來調整它的尺寸。
background-size: 100% 30px; 預設情況下背景時重複平鋪的,設定background-repeat: no-repeat 使得不重複
也可以通過調整色標位置來實現不等寬度的條紋,為了避免每次修改條紋寬度都要改動兩個值，我們找到了簡寫方法: background: linear-gradient(#fb3 30%, #58a 0);
如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小，則該色標的位置值會被設定為它前面所有色標位置值的最大值
建立三種顏色的水平條紋
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;
垂直條紋
在指定漸變色時可以通過乙個額外的引數來指定漸變的方向。預設值為to bottom也就是水平條紋。
background: linear-gradient(to right, #fb3 50%, #58a 0);background-size: 30px 100%;
斜向條紋
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);background-size: 42px;
但是，如果我們想實現30°,60°等不同角度的條紋怎麼辦？如果只是單純的修改漸變角度值，顯然結果會很糟糕。
linear-gradient和radial-gradient都有乙個迴圈式加強版(重複漸變) repeating-linear-gradient 和 repeating-radial-gradient 重複漸變的特點: 色標是無限迴圈重複的，直到填滿整個背景(background-size區域)。
使用重複漸變實現前面的45deg斜向條紋(通過linear-gradient和background-size實現)
將repeating-linear-gradient與background-size相結合也可以實現上述樣式。由於小數不精確，個人不推薦使用這種方法。
background: repeating-linear-gradient(45deg, #fb3 0, #fb3 25%, #58a 0, #58a 50%);background-size: 42.426406871px 42.426406871px;
下面講解乙個小技巧:
如果條紋圖案的顏色屬於同一色系，差異不大，只是在明度方面有著輕微的差異。這種情況下，按照之前的寫法，如果需要調整顏色時，我們需要修改四個顏色值。這時候有個小技巧，把最深的顏色指定為背景色，把半透明白色[hsla(0,0%,100%,alpha)]的條紋疊加在背景色之上得到淺色條紋。這時候只需要修改背景色就可以得到不同顏色變化的條紋。同時對於舊的不支援漸變色的瀏覽器也能很好的顯示背景色。
background: #58a;background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);
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...
利用純CSS實現條紋背景
下面我們來試試 1 等寬條紋 background image linear gradient 0deg,red 50 green 50 background size 100 20px 效果如圖 2 不等寬條紋 利用上述同樣的方法，只需要調整調整色標的位置值即可。background image ...