Mozilla
Firefox，從3.6版本才開(kāi)始支持漸變，更喜歡和Webkit略微不同的語(yǔ)法。
/* Syntax, taken from: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
/* In Practice */
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。
background: white; /* fallback for older/unsupporting browsers */
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ì)比。這很常用。
如果我們想要添加多一種(幾種)顏色，我們可以這樣做：
background: white; /* fallback for older/unsupporting browsers */
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)單的漸變效果：
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 target="_blank">RGBa色彩的瀏覽器支持》提到的IE的解決方法，就是使用這個(gè)漸變?yōu)V鏡。
關(guān)于CSS漸變的一些要點(diǎn)：
- 盡可能的使用它。如果讓IE用戶看到一個(gè)固定的純色，我鼓勵(lì)你使用這種方法；
- IE6/7/8, Opera, Safari 3, 和Firefox 3 不能渲染CSS3 漸變，F(xiàn)irefox 和Safari用戶通常經(jīng)常升級(jí)瀏覽器，而Chrome的自動(dòng)升級(jí)機(jī)制會(huì)在后臺(tái)自動(dòng)升級(jí)，所以這并不是個(gè)大問(wèn)題；
- 總是為不支持這些瀏覽器私有屬性的瀏覽器應(yīng)用一個(gè)默認(rèn)的，純色背景；
- 永遠(yuǎn)不要使用紅色到藍(lán)色的漸變，就像我用作例子的這種；
- 頁(yè)面無(wú)須在每個(gè)瀏覽器里面看起來(lái)完全一樣！
- Firefox可以使用角度來(lái)設(shè)定漸變的方向，而webkit只能使用x和y軸的坐標(biāo)。
本文鏈接：http://www.95time.cn/tech/web/2010/7472.asp 
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁(yè) 理解CSS3線性漸變 [1] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 理解CSS3線性漸變 [2]
