武林網(wǎng)(www.survivalescaperooms.com)文章簡介：CSS3 Gradient分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)。

CSS3發(fā)布很久了，現(xiàn)在在國外的一些頁面上常能看到他的身影，這讓我羨慕已久，只可惜在國內(nèi)為了兼容IE，讓這一項技術受到很大的限制，很多Web前端人員都望而止步。雖然如此但還是有很多朋友在鉆研CSS3在web中的應用，為了不被淘汰，我也開始向CSS3進發(fā)，爭取跟上技術的前沿。從現(xiàn)在開始我會不斷的發(fā)布一些CSS3的應用，和大家一起分享，今天我們首先要看的就是:CSS3： Gradient─CSS3漸變。

CSS3 Gradient分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)。而我們今天主要是針對線性漸變來剖析其具體的用法。為了更好的應用CSS3 Gradient,我們需要先了解一下目前的幾種現(xiàn)代瀏覽器的內(nèi)核，主流內(nèi)容主要有Mozilla（熟悉的有Firefox，F(xiàn)lock等瀏覽器）、WebKit（熟悉的有Safari、Chrome等瀏覽器）、Opera（Opera瀏覽器）、Trident（討厭的IE瀏覽器）。本文照常忽略IE不管，我們主要看看在Mozilla、Webkit、Opera下的應用，當然在IE下也可以實現(xiàn)，他需要通過IE特有的濾鏡來實現(xiàn)，在后面會列出濾鏡的使用語法，但不會具體介紹如何實用，感興趣的可以搜索相關技術文檔。那我們了解了這些，現(xiàn)在就開始今天的主題吧。

CSS3的線性漸變

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

語法：

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

根據(jù)上面的介紹，我們先來看一個簡單的例子：

HTML：

CSS：

(如無特殊說明，我們后面的示例都是應用這一段html和css 的基本代碼)

現(xiàn)在我們給這個div應用一個簡單的漸變樣式：

效果如下：

注：這個效果暫時只有在Mozilla內(nèi)核的瀏覽器下才能正常顯示。