CSS3之漸變效果

 

CSS3漸變色生成網站：http://gradients.glrzad.com/ 

本文參考：前端設計之用CSS3作線性漸變效果http://webskys.com/css3/10.html 

在CSS3出來之前，想要顯示一個漸變的效果，必需要專門製做一個圖片。

CSS3的出現，使得漸變色得以簡單的實現。因爲不是全部的瀏覽器都支持CSS3，因此不是全部的瀏覽器都可以顯現出漸變的效果來。

目前，Mozilla內核的(Firefox)和webkit內核的(Safari/Chrome)瀏覽器支持這一屬性。不過，二者對於漸變的語法有些差別。

webkit

/* 語法，參考自: http://webkit.org/blog/175/introducing-css-gradients/ */ 

-webkit-gradient(, [, ], [, ][, ]) 

/* 實際用法... */ 

background: -webkit-gradient(

linear,  /*漸變的類型*/

0 0,  /*漸變開始的X Y軸座標*/

0 100%, /*漸變結束的X Y軸座標*/

from(red),  /*開始的顏色*/

to(blue)     /*結束的顏色*/

);

mozilla

Firefox從3.6版本纔開始支持漸變

/* 語法，參考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [ || ,]? , [, ]* )   

/* 實際用法*/ 

background: -moz-linear-gradient(

top, /* 漸變從哪裏開始，能夠是度數，如-45deg*/

red, /* 開始的顏色 */

blue/* 結束的顏色 */

);

(其實這裏有些小問題，我在本身的FF試了下，當第一個參數爲top的時候顯示的很奇怪，

是從上到下一小格紅一小格藍交替的，爲45deg的時候卻是正常的，顯示的是從左到右的漸變。不知道是什麼緣由)

若是不須要從一個顏色到另外一個顏色的100%的漸變，能夠這樣作：

舉例以下：

background: white; /* 爲較舊的或者不支持的瀏覽器設置備用屬性 */ 

background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white)); 

background: -moz-linear-gradient(top, #dedede, white 8%); 

若是想要添加多一種（幾種）顏色，能夠經過color-stop來實現。

color-stop(哪裏開始中止，使用哪一種顏色)

舉例以下：

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));

這個例子中，

對於-moz版本，定義，從元素的20%的高度的地方開始是紅色。（按個人理解應該是0~8%爲從銀灰色到白色，而後從8%到20%的地方是從白變到紅色，20%後全是紅色）。

對於-webkit版本，顯示的是相同的效果，是經過color-stop來實現的。

IE中漸變色的實現

因爲IE還不支持CSS3，故不支持漸變，但提供了漸變濾鏡，能夠實現最簡單的漸變效果。

/* IE6,IE7 */ 

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000');   

/* IE8 */

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000')";   

關於漸變

Firefox可使用角度來設定漸變的方向，而webkit只能使用x和y軸的座標。

老是爲不支持這些瀏覽器私有屬性的瀏覽器應用一個默認的，純色背景。

頁面無須在每一個瀏覽器裏面看起來徹底同樣。