在CSS3出現(xiàn)之前，漸變效果只能通過圖形軟件設(shè)計圖片來實現(xiàn)，可拓展性差，還影響性能。如今已經(jīng)進(jìn)入CSS3標(biāo)準(zhǔn)的漸變可以很輕松的完成漸變效果。漸變實際上分為線性漸變和徑向漸變兩種，本文介紹線性漸變。
定義
漸變實際上是兩種或多種顏色之間的平滑過渡。而線性漸變是多種顏色沿著一條直線(稱為漸變線)過渡。漸變的實現(xiàn)由兩部分組成：漸變線和色標(biāo)。漸變線用來控制發(fā)生漸變的方向；色標(biāo)包含一個顏色值和一個位置，用來控制漸變的顏色變化。瀏覽器從每個色標(biāo)的顏色淡出到下一個，以創(chuàng)建平滑的漸變，通過確定多個色標(biāo)可以制作多色漸變效果。
[注意]safari4-5、IOS3.2-4.3、android2.1-3只支持線性漸變，且需要添加-webkit-；safari5.1-6、IOS5.1-6.1、android4-4.3支持線性和徑向漸變，且需要添加-webkit-；IE10+及其他高版本瀏覽器支持標(biāo)準(zhǔn)寫法
漸變線
漸變的第一個參數(shù)用于指定漸變線，默認(rèn)是to bottom。有兩種方式指定漸變線方向
【1】使用角度
0deg表示沿著元素的中心線由下向上的方向(類似于y軸)，且正角度表示順時針旋轉(zhuǎn)
[注意]對于-webkit-舊版本瀏覽器，如windows系統(tǒng)下的safari瀏覽器來說，0deg表示沿著元素中心線從左向右的方向(類似于x軸),且正角度表示逆時針旋轉(zhuǎn)
所以-webkit-舊版本瀏覽器與標(biāo)準(zhǔn)瀏覽器的之間線性漸變的角度關(guān)系為
[注意]對于webkit內(nèi)核的瀏覽器來說，使用javascript改變元素的樣式。當(dāng)帶-webkit-的私有樣式和不帶-webkit-的標(biāo)準(zhǔn)樣式同時存在的時候，并不一定是后面覆蓋前面。所以如果兩種寫法產(chǎn)生的效果相同，但參數(shù)不同時，要使用瀏覽器識別來分別寫不同的情況。
【2】使用關(guān)鍵字
新聞熱點(diǎn)
疑難解答
