在一些頁面效果中有時會遇到背景色漸變顯示問題。這時就會想到CSS3中新加的漸變屬性gradient。

CSS3 GradIEnt分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)。運用得比較多的是線性漸變。為了更好的應用CSS3 Gradient,我們先了解一下浏覽器的内核，主流内容主要有Mozilla（Gecko）（熟悉的有Firefox，Flock等浏覽器）、WebKit（熟悉的有Safari、Chrome等浏覽器）、Opera(presto)（Opera浏覽器）、Trident（IE浏覽器）。我們主要看看在Mozilla、Webkit、Opera下的應用，當然在IE下也可以實現，他需要通過IE特有的濾鏡來實現。

一、線性漸變在Webkit下的應用

參數：一共有5個參數。第一個參數表示漸變類型（type）,可以是linear(線性漸變)或者radial(徑向漸變)。。第二個參數和第三個參數，都是一對值，分别表示漸變起點和終點。這對值可以用坐标形式表示，也可以用關鍵值表示，比如 left top（左上角）和left bottom（左下角）。第四個和第五個參數，分别是兩個color-stop函數。color-stop函數接受兩個參數，第一個表示漸變的位置，0為起點，0.5為中點，1為結束點；第二個表示該點的顔色。

效果如下所示

二、線性漸變在Mozilla下的應用

參數：其共有三個參數，第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，如果定義成left top，那就是從左上角到右下角。第二個和第三個參數分别是起點顔色和終點顔色。你還可以在它們之間插入更多的參數，表示多種顔色的漸變。

三、線性漸變在Opera下的應用

參數：-o-linear-gradient有三個參數。第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，如果定義成left top，那就是從左上角到右下角。第二個和第三個參數分别是起點顔色和終點顔色。你還可以在它們之間插入更多的參數，表示多種顔色的漸變。

四、線性漸變在IE下的應用

E依靠濾鏡實現漸變。startColorstr表示起點的顔色，endColorstr表示終點顔色。GradientType表示漸變類型，0為缺省值，表示垂直漸變，1表示水平漸變。

CSS3的徑向漸變

CSS3的徑向漸變和其線性漸變是很相似的。語法如下：

徑向漸變到目前還不支持Opera的内核浏覽器

效果：

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!