雖然css3的漸變屬性在眾瀏覽器中得到較好的支援，但在實際使用的時候也像製作軟體（photoshop cs6、firework cs6等）的漸變工具一樣，將漸變分成了幾種：線性漸變（linear gradients），徑向漸變（radial gradients）、重複線性漸變和重複徑向漸變。
國外乙個根據gradients生產的多種漸變圖案
w3c標準線性漸變語法與屬性引數
linear-gradient([[| to ],]?[,]+)：通過角度來確定漸變的方向。0度表示漸變方向從下向上，90度表示漸變方向從左向右。如果取值為下值，其角度按順時針方向旋轉。
乙個漸變可以包含多個色標，位置值為0~1之間的小數，或者0~100%之間的百分數，指定色標的位置比例
w3c標準徑向漸變語法
radial-gradient([[|| ] [at ]?,| at ,]?[,]+);作用引數
shap
漸變形狀
ellipse(橢圓漸變) circle（圓形漸變）
size
漸變尺寸
closest-side：漸變半徑最近的邊；
closest-corner：漸變半徑最近的角；
farthest-side：漸變半徑最遠的邊；
farthest-corner：漸變半徑最遠的角；
主要半徑 次要半徑（水平半徑 垂直半徑）【可以為數值或者百分比】
position
漸變原點，即漸變圓心位置
關鍵字長度
百分比
徑向漸變的屬性引數
：主要用來定義徑向漸變的圓心位置。此值類似於css中background-position屬性，用於確定元素漸變的中心位置。如果這個引數省略了，其預設值為「center」。其值主要有以下幾種：
：主要用來定義徑向漸變的形狀。其主要包括兩個值「circle」和「ellipse」：
如果設定了為「circle」或者省略，可能顯式設定為。表示的是用長度值指定徑向漸變的橫向或縱向直徑長度，並根據橫向和縱向的直徑來確定徑向漸變的形狀是圓或者是橢圓。此值不不能負值。
主要半徑 次要半徑（主要半徑即水平半徑，次要半徑為垂直半徑）
如果設定了「ellipse」或者省略，可能顯式設定為［|］。主要用來設定橢圓的大小。第乙個值代表橢圓的水平半徑，第二個值代表垂直半徑。這兩個值除了使用定義大小之外還可以使用來定義這兩半徑大小。使用定義值是相對於徑向漸變容器的尺寸。同樣不能為負值。
：徑向漸變線上的停止顏色，類似於線性漸變的。徑向漸變的為漸變線從中心點向右擴散。其中0%表示漸變線的起始點，100%表示漸變線的與漸變容器相交結束的位置。而且其顏色停止可以定義乙個負值。
重複線性漸變
重複徑向漸變
CSS3 gradient簡單使用
因方便在firefox中測試，根據原文簡單總結一下mozilla核心的線性漸變用法 徑向漸變暫時忽略 其他核心瀏覽器的漸變 webkit old,webkit new,opera,trident 用法都差不多，請參考原文.在mozilla核心中使用 moz linear gradient 屬性來完成...
CSS3的背景漸變gradient
css3 gradient 分為 linear gradient 線性漸變 和radial gradient 徑向漸變 記住漸變並不是css3的乙個屬性，而是乙個屬性的值，雖然在css3中沒有專門註明漸變是針對background的，但是目前我所了解到的是只有background才會應用漸變屬性 b...
CSS3魔法堂 背景漸變（Gradient）
一 前言 很久之前就了解過css3的線性漸變 linear gradient 這段時間決定進一步認知這一特性，以下筆記以便日後查閱。二 css3的各種背景漸變 1.線性漸變 示例 七彩虹 樣式屬性 linear gradient 起始角度,color stop,color stop color st...