css3漸變分為線性漸變和徑向漸變，先來說說比較簡單的線性漸變。
css3的線性漸變和設計軟體中的漸變工具沒什麼區別，都是指定乙個漸變的方向，起始顏色，結束顏色，當然，起始顏色和結束顏色中間還可以新增其他顏色，也就是說漸變色可以是多種，而不僅僅是兩種顏色之間的漸變。
w3c標準線性漸變語法如下：
linear-gradient([[| to ],]?[,]+)第乙個引數指定的是漸變的方向，同時決定漸變顏色的停止位置，預設值是 to bottom ，此引數可省略，設定此引數有兩種指定方法。通過角度和通過關鍵字來設定，通過角度來設定就是通過角度來確定漸變的方向，0度表示為從下到上，90度表示從左到右，就是起始位置為從下到上，然後角度從起始位置以順時針方向增大。通過關鍵字設定就比較簡單了，比如可以設定 "to top"，"to bottom"，"to left"，"to right"，除此之外，還可以設定"to top left"，"to bottom right"之類的，具體的作用就是它們的中文意思。
第二個和第三個引數是開始顏色和結束顏色，當然中間可以新增更多的漸變色，格式可以是任意的css顏色模式，例如#ffbb00，rgba(255,3,56,0.7)，hsla(200,50%,43%,0.5)，red等。
示例：
說完了線性漸變再說一下徑向漸變，徑向漸變和線性漸變差不太多，就是指定漸變形狀（圓形和橢圓），乙個漸變中心，然後指定漸變半徑和漸變顏色就ok了。
w3c標準徑向漸變語法：
radial-gradient([[|| ] [at ]?,| at ,]?[,]+)第二個引數size就是設定漸變的範圍大小，這個引數可以設定關鍵字也可以設定長度，關鍵字有closest-side表示漸變的半徑長度為圓心到離圓心最近的邊，closest-corner表示漸變的長度為從圓心到離圓心最近的角，farthest-side表示漸變的半徑長度為圓心到離圓心最遠的邊，farthest-corner表示漸變的長度為從圓心到離圓心最遠的角，此引數的預設值為farthest-corner。設定長度的時候需要注意一下，如果shape設定為circle或者省略，size可以顯式的設定為長度值，如80px，表示從漸變中心到結束漸變的距離，可以指定長度和寬度，但是不能是負值，也不可以設定為百分比值。如果shape設定為ellipse或者省略，size可以顯式的設定為長度值和百分比值，此時的百分比值是漸變所在的容器的長度和寬度的百分之多少。
第三個引數position就是設定漸變中心的位置，這個引數有多種設定方式，可以用長度值設定漸變中心的橫座標和縱座標，可以為負值，也可以用百分比值設定漸變中心，可以是負值，還可以指定關鍵字來設定，關鍵字有top,bottom,left,right,center這幾個，可以單獨設定或者組合，例如 top， top left。
第四個及以後的引數就是漸變色了，這個和線性漸變基本沒有區別，可以設定css的任何顏色模式
示例：
CSS3重複漸變（線性和徑向漸變）
background image repeating linear gradient to top,f9f9f9,f9f9f9 29px,ccc 30px 重複線性漸變 background image repeating radial gradient red,green 40px,orange ...
css3 線性漸變和徑向漸變
線性漸變 ie6以下不相容 徑向漸變 只支援firefox chrome和safari 注意 background image 可以寫 background 我自己在網頁中寫的徑向漸變相容 firefox chrome ie10 ie10 safari background image老式寫法 相容...
CSS3 11 漸變 線性漸變 徑向漸變
漸變是css3當中比較豐富多彩的乙個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少的使用數量，並且具有很強的適應性和可擴充套件性。可分為線性漸變 徑向漸變1.linear gradient線性漸變指沿著某條直線朝乙個方向產生漸變效果 a 語法 linear gradient b 引數說明 第乙...