為了顯示乙個漸變而專門製作乙個的做法是不靈活的，而且很快會成為一種不好的做法。但是遺憾的是，截至寫這篇文章，可能還必須這樣做，但是希望不會持續太久。多虧firefox 和safari/chrome，我們現在可以使用最少的努力實現強大的漸變。在本文中，我們將展示css漸變的簡單實現以及該屬性在mozilla和webkit核心瀏覽器中的不同。
儘管mozilla和webkit通常對css3屬性採取同樣的語法，但是對於漸變，他們很不幸的不能達成一致。webkit是第乙個支援漸變的瀏覽器核心，它使用下面的結構：
1234
/* 語法，參考自: */
-webkit-gradient(
>,
>[,
>
]?,>[,
>
]? [
,>]*
)/* 實際用法... */
不要擔心這些語法會讓你看花眼，我也是這樣的！只要記得我們需要用乙個逗號來隔開這個引數組。
firefox，從3.6版本才開始支援漸變，更喜歡和webkit略微不同的語法。
123
45
/* 語法，參考自: */ -moz-linear-gradient(
[> || >,
]? >,
>[,
>]*
)/* 實際用法*/
如果你不需要從乙個顏色到另乙個顏色的100%漸變怎麼辦？這就是color stop起作用的時候了。乙個普遍的設計技術是使用乙個較短而細微的漸變，比如：
注意頂部的淺灰色到白色的細小的漸變
在過去，標準的做法就是製作乙個，並將其設為乙個元素的背景，然後讓其水平平鋪。然而使用css3，這是個小case。
123
4
background
:white
;/* 為較舊的或者不支援的瀏覽器設定備用屬性 */
background
: -moz-linear-gradient(
top,
#dedede
,white8%)
;background
: -webkit-gradient(linear,00
,08%, from(
#dedede
), to(
white))
;border-top
:1px
solid
white
;
這次，我們讓漸變結束於8%，而不是預設的100%。請注意我們也在頭部採用了乙個邊框，以形成對比。這很常用。
如果我們想要新增多一種(幾種)顏色，我們可以這樣做：
1
23
background
:white
;/* 備用屬性 */
background
: -moz-linear-gradient(
top,
#dedede
,white8%,
red20%);
background
: -webkit-gradient(linear,00
,0100%
, from(
#dedede
), color-stop(8%,
white
), color-stop(
20%,
red)
;
ie並不支援css漸變，但是提供了漸變濾鏡，可以實現最簡單的漸變效果：
1
2
filter: progid:dximagetransform
.microsoft.gradient(startcolorstr=
'#ffffff'
, endcolorstr=
'#ff0000');
/* ie6,ie7 */
-ms-filter:
"progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffff', endcolorstr='#ff0000')"
;/* ie8 */
ps：事實上，我們在《rgba色彩的瀏覽器支援
》提到的ie的解決方法，就是使用這個漸變濾鏡。
css3線性漸變
css3漸變有兩種 linear gradient線性漸變和radial gradient徑向漸變。今天看的是linear gradient線性漸變，所以只做線性漸變的總結。w3c標準語法 formal grammar linear gradient to left right top bottom...
css3線性漸變
css3線性漸變 為了建立乙個線性漸變，必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色。同時，你也可以設定乙個起點和乙個方向 或者乙個角度 語法 background image linear gradient direction,color1,color2 線性漸變 從上到下 預設情...
CSS3線性漸變
css3線性漸變可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。線性漸變 linear gradients 建立乙個線性漸變，必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色。方向可以是上下 左右或者對角方向，你也可以設定乙個起點和乙個方向 或乙個角度 語法 background li...