為了顯示一個(gè)漸變而專(zhuān)門(mén)制作一個(gè)圖片的做法是不靈活的，而且很快會(huì)成為一種不好的做法。但是遺憾的是，截至寫(xiě)這篇文章，可能還必須這樣做，但是希望 不會(huì)持續(xù)太久。多虧Firefox 和Safari/Chrome，我們現(xiàn)在可以使用最少的努力實(shí)現(xiàn)強(qiáng)大的漸變。在本文中，我們將展示CSS漸變的簡(jiǎn)單實(shí)現(xiàn)以及該屬性在Mozilla和 webkit內(nèi)核瀏覽器中的不同。

PS：本文原文本來(lái)提供了一個(gè)視頻，但是由于眾所周知的原因，我們無(wú)法觀看這個(gè)在Youtube上的視頻，想看的同學(xué)請(qǐng)自己想辦法觀看(最高720P) : http://www./watch?v=9D2hyM5SSCE

Webkit

盡管Mozilla和Webkit通常對(duì)CSS3屬性采取同樣的語(yǔ)法，但是對(duì)于漸變，他們很不幸的不能達(dá)成一致。Webkit是第一個(gè)支持漸變的瀏覽器內(nèi)核，它使用下面的結(jié)構(gòu)：

1
2
3
4

/* 語(yǔ)法，參考自: http:///blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
/* 實(shí)際用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

不要擔(dān)心這些語(yǔ)法會(huì)讓你看花眼，我也是這樣的！只要記得我們需要用一個(gè)逗號(hào)來(lái)隔開(kāi)這個(gè)參數(shù)組。

• 漸變的類(lèi)型? (linear)
• 漸變開(kāi)始的X Y 軸坐標(biāo)(0 0 – 或者left-top)
• 漸變結(jié)束的X Y 軸坐標(biāo)(0 100% 或者left-bottom)
• 開(kāi)始的顏色? (from(red))
• 結(jié)束的顏色? (to(blue))

Mozilla

Firefox，從3.6版本才開(kāi)始支持漸變，更喜歡和Webkit略微不同的語(yǔ)法。

1
2
3
4
5

/* 語(yǔ)法，參考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [
<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
 
/* 實(shí)際用法*/
background: -moz-linear-gradient(top, red, blue);

• 請(qǐng)注意我們將漸變的類(lèi)型——linear——放到了屬性前綴中了
• 漸變從哪里開(kāi)始? (top – 我們也可以使用度數(shù)，比如-45deg)
• 開(kāi)始的顏色? (red)
• 結(jié)束的顏色? (blue)

Color-Stops

如果你不需要從一個(gè)顏色到另一個(gè)顏色的100%漸變?cè)趺崔k？這就是color stop起作用的時(shí)候了。一個(gè)普遍的設(shè)計(jì)技術(shù)是使用一個(gè)較短而細(xì)微的漸變，比如：

注意頂部的淺灰色到白色的細(xì)小的漸變

在過(guò)去，標(biāo)準(zhǔn)的做法就是制作一個(gè)圖片，并將其設(shè)為一個(gè)元素的背景圖片，然后讓其水平平鋪。然而使用CSS3，這是個(gè)小Case。

1
2
3
4

background: white; /* 為較舊的或者不支持的瀏覽器設(shè)置備用屬性 */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;

這次，我們讓漸變結(jié)束于8%，而不是默認(rèn)的100%。請(qǐng)注意我們也在頭部采用了一個(gè)邊框，以形成對(duì)比。這很常用。

如果我們想要添加多一種(幾種)顏色，我們可以這樣做：

1
2
3

background: white; /* 備用屬性 */
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);

• 對(duì)于-moz 版本，我們定義，從元素的20%的高度的地方開(kāi)始是紅色。
• 而對(duì)于-webkit，我們使用color-stop，采用兩個(gè)參數(shù)：哪里開(kāi)始停止，使用哪種顏色。

IE

IE并不支持CSS漸變，但是提供了漸變?yōu)V鏡，可以實(shí)現(xiàn)最簡(jiǎn)單的漸變效果：

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：事實(shí)上，我們?cè)凇?a href="http://www./rgba-browser-support-compatibility.html">RGBa色彩的瀏覽器支持》提到的IE的解決方法，就是使用這個(gè)漸變?yōu)V鏡。