在這里要感謝一下網(wǎng)站：

w3cplus，W3School ，W3C 等等一些網(wǎng)上的教程啊博客什么的（還有好多就不一一列舉了），我算是從這些地方開始接觸傳說中的CSS3和HTML5，而自己的學(xué)習(xí)筆記自然也會從中借鑒。

建議：大部分CSS3的屬性尚在草案之中，使用的時候最好還是都加上各自瀏覽器的私有前綴

eg：

{

 -webkit-border-radius:10px;

 -moz-border-radius:10px;

 -o-border-radius:10px;

 border-radius:10px;

}

漸變在網(wǎng)頁上應(yīng)該算是很常見的一種效果。但是在CSS3出現(xiàn)之前，漸變效果必須使用圖片才能做到。這就會出現(xiàn)問題了，就像之前說的圓角和陰影一樣，因為使用了圖片，在一定程度上影響網(wǎng)頁的性能是肯定的，同時還有網(wǎng)站后期維護(hù)和修改的難題。CSS3的漸變誕生很久了，到目前為止，只要是支持該屬性的瀏覽器，除了它們的私有前綴之外，其他寫法都是一樣的。

在剛開始的時候，在webkit下使用的是：

-webkit-gradient(,  [, ]?,  [, ]? [, ]*) //老式語法書寫規(guī)則

而到現(xiàn)在，在webkit下使用的是：

-webkit-linear-gradient( [ || ,]? ,  [, ]* )//最新書寫語法 

現(xiàn)在，新式語法與其他瀏覽器，包括firefox，opera的語法書寫統(tǒng)一（現(xiàn)在的opera已經(jīng)使用了webkit內(nèi)核）；

其實gradient，分成兩種一種是線性漸變（linear-gradient），另一種是徑向漸變（radial-gradient）。我們可以將linear-gradient和radial-gradient添加到任何可以接受圖片的屬性，比如：backgorund-images，list-style-image等等。今天我要介紹的就是標(biāo)題上的linear-gradient。

在我看來漸變的參數(shù)變化多端，有點復(fù)雜，所以先從簡單的開始講起

linear-gradient最簡單的語法：

linear-gradient(起點，開始顏色，結(jié)束顏色);

起點表示漸變開始的位置，顏色是從開始顏色漸變到結(jié)束顏色。

1、使用top，right，bottom，left中的一個來指定漸變的起點

.test{

 background:-webkit-linear-gradient(top,#fff,#000);

 background:-moz-linear-gradient(top,#fff,#000);

 background:-o-linear-gradient(top,#fff,#000);

 background:linear-gradient(top,#fff,#000);

2、稍微復(fù)雜一點，可以使用top與left或者right組合，也可以使用bottom與left或者

right組合來改變漸變起點。但是切記：top不能和bottom組合，left不能和right組合

.test{

 background:-webkit-linear-gradient(top right,#fff,#000);

 background:-moz-linear-gradient(top right,#fff,#000);

 background:-o-linear-gradient(top right,#fff,#000);

 background:linear-gradient(top right,#fff,#000);

}

.test{

 background:-webkit-linear-gradient(bottom left,#fff,#000);

 background:-moz-linear-gradient(bottom left,#fff,#000);

 background:-o-linear-gradient(bottom left,#fff,#000);

 background:linear-gradient(bottom left,#fff,#000);

}

3、上面兩種寫法只能夠畫出有限的幾種漸變。我們可以使用角度來設(shè)置漸變的起點。

以下面的代碼為模板，將“0deg”修改成你想要的角度

.deg0{

 background:-webkit-linear-gradient(0deg,#fff,#000);

 background:-moz-linear-gradient(0deg,#fff,#000);

 background:-o-linear-gradient(0deg,#fff,#000);

 background:linear-gradient(0deg,#fff,#000);

}

我添加了12個div，以30deg為差值。

根據(jù)結(jié)果，我又畫出了這張圖

可以看出，在使用角度設(shè)定漸變起點的時候，0deg對應(yīng)botton，90deg對應(yīng)left，180deg對應(yīng)top，360deg對應(yīng)right。整個過程就是以bottom為起點逆時針旋轉(zhuǎn)。

關(guān)于起點的內(nèi)容我暫時只了解到這么多，以后如果草案做了修改，我了解之后會立馬更新。

漸變的顏色可以不止兩種，在起點顏色和終點顏色之間可以添加更多顏色。

.test{

 background:-webkit-linear-gradient(top,#fff,red,#000,red);

 background:-moz-linear-gradient(top,#fff,red,#000,red);

 background:-o-linear-gradient(top,#fff,red,#000,red);

 background:linear-gradient(top,#fff,red,#000,red);

}

或者：

.test{

 background:-webkit-linear-gradient(top,red,yellow,blue,green,purple,orange);

 background:-moz-linear-gradient(top,red,yellow,blue,green,purple,orange);

 background:-o-linear-gradient(top,red,yellow,blue,green,purple,orange);

 background:linear-gradient(top,red,yellow,blue,green,purple,orange);

}

上面的例子中，顏色的漸變都是均勻的，我們也可以給每一種顏色指點漸變的位置，從而使?jié)u變不是單純的均勻變化，這個也很簡單，只要在你想修改的顏色后面加上漸變的文職就可以了。為了簡單直觀，我只用三種顏色。

.test{

 background:-webkit-linear-gradient(red ,green,blue);

 background:-moz-linear-gradient(red ,green,blue);

 background:-o-linear-gradient(red ,green,blue);

 background:linear-gradient(red ,green,blue);

}

.test{

 background:-webkit-linear-gradient(red 50% ,green,blue);

 background:-moz-linear-gradient(red 50% ,green,blue);

 background:-o-linear-gradient(red 50% ,green,blue);

 background:linear-gradient(red 50% ,green,blue);

}

當(dāng)然，如果顏色格式使用CSS3中的rgba格式，那么漸變將會是透明的。

關(guān)于線性漸變（linear-gradient）的介紹就到此為止了，有錯誤之處歡迎留言。

等我研究了徑向漸變（radial-gradient）我在不上徑向漸變的筆記