關於css3的漸變，目前各大瀏覽器還未做到很好的支持，所以需要在我們使用時加上各大瀏覽器前綴。
-moz-：使用Mozilla內核的瀏覽器（Firefox瀏覽器）
-webkit-：使用Webkit核心的瀏覽器（Chrome,Safari瀏覽器）
-o-：使用Opera內核的瀏覽器（Opera瀏覽器）
這裡對IE不做過多介紹，對於本文背景顏色的漸變，也沒有考慮IE
一。線性漸層(linear-gradient)
1.語法：-moz-linear-gradient(
參數：第一個參數便是線性漸變的方向
top：從上到下；
left：由左至右；
right：由右到左；
bottom：從下到上；
也可以兩兩組合，例如從左上：left top,從右上：right top等等，這裡就不過多介紹了；
angle代表角度（一直認為涉及到角度一個平面直角座標系足夠直觀）。
第二個參數和第三個參數分別是起點和終點的顏色，還可以再他們之間插入更多的參數，表示多種顏色的漸進，顏色支持使用16進制數值表示，也可以使用rgb (a)數值
例：background:-moz-linear-gradient(top,#000,#fff);
註：表示從#000到#fff的漸變
background:-moz-linear-gradient(45deg,#000 50%,#555 50%,#555);
註：表示0-50%是#000,50%-100%是#555
2.文法：-webkit-linear-gradient(
-webkit-gradient(
新式語法書寫規則與其他相同這裡不過多介紹，下面介紹一下老式語法規則：
參數：第一個參數表示漸變類型，可以是linear(線性)或radial(徑向)；
第二個參數和第三個參數表示漸變的起點和終點，可以是座標或關鍵值；
第四個和第五個參數分別表示起點和終點的顏色，還可以再他們之間插入更多的參數，表示多種顏色的漸進，顏色支持使用16進制數值表示，也可以使用rgb( a)數值。
例：background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#000));
註：表示從上到下，從#fff到#000的漸變
background:-webkit-gradient(linear,0 0,100% 100%,color-stop(.5,rgb(255,255,255)),color-stop(.5,rgba(0,0,0,.2)));
註：表示由左上到右下0-50%是白色，50%-100%是透明度為0.2的黑色
3.語法：-o-linear-gradient(
例：background:-moz-linear-gradient(top,#000,#fff);
註：表示從#000到#fff的漸變
二。徑向漸層（radial-gradient）
語法：-moz-radial-gradient(
-webkit-radial-gradient(
oprea瀏覽器對徑向漸變的支援還不太好，所以這裡不介紹。除了在線性漸變中看到的其實位置，方向和顏色，徑向漸變允許指定漸變的形狀：圓形（circle）和橢圓形（ellipse）和大小:最近端（closest-side），最近角（closest -corner），最遠端（farthest-side），最遠角（farthest-corner），包含（contain），覆蓋（cover）。對於這幾個大小的設定有的差距甚微，有些迷惑。
例：background:radial-gradient(#fff, #000););
🎜🎜🎜🎜🎜🎜🎝 ient(#fff, #000);
註：表示從白到黑的圓形漸變 〜
background: -moz-radial-gradient(80% 20%, closest-corner, #fff, #000);
background: -webkit-radial-gradient(80% 20%, closest-corner, #fff, #000);
註：表示在80% 20%的位置有白色圓到黑色的漸變
2.css的重複漸層
語法：-moz-repeating-linear-gradient(
-o-repeating-linear-gradient(
-moz-radial-gradient(
-webkit-radial-gradient(
background: -webkit-repeating-radial-gradient(#fff, #000 5px, #000 5px, #fff 10px); 註：表示一圈一圈的黑白圓圈（不要太暈哦） 本文摘自沙漠的部落格http://www.w3cplus.com/content/css3-gradient
