漸變，指形狀或顏色的有規律性的變化，往往可以給人很強的節奏感和審美情趣，這裡研究的主要是顏色的漸變。漸變的形式在日常生活中很常見，在網頁中的用的也很多，傳統網頁技術中往往用來實現漸變，容易帶來載入負擔和動態定製的瓶頸。
css3提供了實現漸變的屬性，隨著瀏覽器的逐步支援，研究css3漸變已勢在必行。涉及css漸變的屬性主要有linear-gradient、radial-gradient、repeating-linear-gradient、repeating-radial-gradient四個屬性，下面來分別解析下，也可以直接看案例。
一、linear-gradient線性漸變
1.相容性
現在最新的瀏覽器開始逐漸的支援線性漸變屬性，並且趨向統一，相容性**參見caniuse.com
在sublime text3中可以使用lg(#0f0,#00f)可以生成以下**，最佳的漸變書寫方法。
[css]view plain
copy
background-image
: -webkit-gradient(linear,
0 0,
0 100%
, from(
#0f0
), to(
#00f
));
/*for safari 4+, chrome 2+*/
background-image
: -webkit-linear-gradient(
#0f0
, #00f
);
/*for safari 5.1+, chrome 10+*/
background-image
: -moz-linear-gradient(
#0f0
, #00f
);
/*for firefox*/
background-image
: -o-linear-gradient(
#0f0
, #00f
);
/*for opera*/
background-image
: linear-gradient(
#0f0
, #00f
);
/*標準屬性*/
2.語法
1. 可選引數，設定漸變的形式，可以有兩種方式，一種是設定旋轉的角度，一種是使用關鍵字。
角度值，0度代表水平從左到右，90度代表垂直從下到上，從0度開始逆時針角度變換。
關鍵字，left代表從左到右的漸變，top代表從上到下的漸變，right代表從右到左，bottom代表從上到下；left top代表從左上到右下的漸變，left bottom代表從左下到右上的漸變，right top代表從右上到左下，right bottom代表從右下到左上。
2.設定第乙個顏色點，漸變開始的顏色。
3.可選引數，設定中間顏色點
4.可選引數，設定中間顏色的位置
5.設定結束點顏色
乙個線性漸變至少需要制定兩個顏色值。
二、radial gradients-徑向漸變
1.相容性，徑向漸變和線性漸變的相容性是一致的，最新瀏覽器的相容需要實現-webkit和標準兩種寫法。
2.語法
1.可選引數，設定漸變的中心，60px 45px指距離左側60px距離上部45px，單位可以是畫素，也可以是百分比，也可是關鍵字。預設為中心位置。
2.可選引數，漸變的形狀，可以取值為circle或eclipse，預設值為eclipse。
3.可循引數，漸變的大小，可以取值為
closest-side：
指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
closest-corner：
指定徑向漸變的半徑長度為從圓心到離圓心最近的角
farthest-side：
指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
farthest-corner：
指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
contain：
包含，指定徑向漸變的半徑長度為從圓心到離圓心最近的點。類同於closest-side
cover：
覆蓋，指定徑向漸變的半徑長度為從圓心到離圓心最遠的點。類同於farthest-corner4.起始顏色。
5.中間顏色。6.中間顏色位置。可選。
7.終點顏色。 三、
案例重點解析下案例9，實現步驟和最終效果如下圖所示。
四、延伸閱讀 》
w3 css-images-3 》
gradient
css3漸變，前端開發whqet，做最好的前端開發blog。
前端開發whqet，關注前端開發技術 分享網頁相關資源。
詳解CSS 3 漸變屬性
css 3中的漸變屬性的支援度具體是 ie10 ff3.6 safari4.0 chrome opera11.1 ios3.2 opera mobile11.1 android，也就是說除了ie10以外其它的瀏覽器已經支援 css3 的漸變屬性了 雖然有些還在使用私有屬性 opera暫不支援徑向漸變...
CSS3顏色漸變
漸變帶來了色彩巨大的展現。可謂不可不學 是故收集整理，權當乙個小教程吧。一 線性漸變在mozilla下的應用 語法 moz linear gradient 引數 其共有三個引數，第乙個引數表示線性漸變的方向，top是從上到下 left是從左到右，如果定義成lefttop，那就是從左上角到右下角。第二...
css3 製作漸變
先了解一下目前的幾種現代瀏覽器的核心，主流內容主要有 mozilla gecko 熟悉的有firefox，flock等瀏覽器 moz webkit 熟悉的有safari chrome等瀏覽器 webkit opera presto opera瀏覽器 o trident ie瀏覽器 線性漸變 line...