先來說說漸變吧
background: linear-gradient(#fb3 20%, #58a 80%);如果把兩個色標合在一起，會怎樣呢
w3c是這樣規定的「如果多個色標具有相同的位置， 它們會產生乙個無限小的過渡區域，
過渡的起止色分別是第乙個和最後乙個指定值。 從效果上看， 顏色會在那
個位置突然變化， 而不是乙個平滑的漸變過程」
也就是說假設如下設定的話：
background: linear-gradient(#fb3 50%, #58a 50%);因為漸變是一種由**生成的影象， 我們能像對待其他任何背景影象那
樣對待它， 而且還可以通過 background-size 來調整其尺寸
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
但是現在這樣的**就會有乙個問題，如果我想改變50%則需要改變兩處
根據w3c的規定「如果某個色標的位置值比整個列表中在它之前的色標的位置值都要
小， 則該色標的位置值會被設定為它前面所有色標位置值的最大值。」
所以上述**可改為：因為如果我們把第二個色標的位置值設定為 0， 那它的位置就
總是會被瀏覽器調整為前乙個色標的位置值
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;
同理可以建立多重邊框：
備註：其實寫法不止一種
/* background: linear-gradient(#fb3 25%, #58a 0,#58a 50%,yellowgreen 0,yellowgreen 75%,red 0,red 100%); */
/* 兩種都可以 */
/* background: linear-gradient(#fb3 25%, #58a 0,#58a 50%,yellowgreen 0,yellowgreen 75%,red 0); */
body如果我們想要45度角的條紋背景，可能會想用如下**來實現：
body事實上的原理是這樣子的，如下圖所示，也就是說單個切片中是包含四個條紋的，
所以**最後演變為：
body上面只說了45deg和90deg這種特殊角度的條紋，如果要30deg或60deg的怎麼辦？
來看看repeating-linear-gradient的威力吧
其實上面45deg可簡化為：
bodyhtml有乙個小秘訣在於：條紋顏色都是相近的，只是在明度方面有著輕微的差異
所以我們可以：不再為每種條紋單獨指定顏色， 而是把最深的顏色指定為背景色， 同時把半透明白色的條紋疊加在背景色之上來得到淺色條紋
htmlCSS揭秘 條紋背景
不管是線性漸變，還是徑向漸變。它們都是用來設定元素的背景影象。background image屬性可以為乙個元素設定乙個或者多個背景影象。這些影象在繪製過程中，以z方向堆疊的方式進行，也就是先指定的影象會在後指定的影象上面繪製，也就越接近使用者。元素的border會在背景影象之上繪製 別忘了前面講的...
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 ...