上節在《再說CSS3漸變——線性漸變》和大家一起學習了CSS3 Gradient中徑向漸變最新文法（稱得上是W3C的标準文法）相關知識以及其基本使用。今天我們在這一篇中主要和大家一起來了解漸變中的徑向漸變新文法以及其基本使用。
CSS3徑向漸變是圓形或橢圓形漸變。顔色不再沿着一條直線軸變化，而是從一個起點朝所有方向混合。但相對線性漸變要比徑向漸變複雜的多。
CSS3的徑向漸變已得到衆多浏覽器引擎的支援，隻不過其文法的版本根據不同的引擎浏覽器，其文法也不一樣，特别是在Webkit引擎的浏覽器下和 線性漸變的文法類似，也有新舊之法。而在其他幾大引擎的浏覽器，其文法基本類似，隻是使用的字首不同而以。特别是在2013年04年，W3C為CSS3徑 向漸變推出最新的文法格式。接下來我們一起來看看各引擎浏覽器下的徑向漸變文法。
CSS3徑向漸變在Webkit引擎下的文法和線性漸變的文法一樣，分為兩種，一種是老版本的文法，另外一種是新版本文法：
Webkit引擎下的老版本文法：
Webkit引擎新式文法
Webkit引擎中的浏覽器Chrome4－9和Safari 4－5版本支援老式的Webkit引擎徑向文法，Chrome10.0+和Safari5.1+支援Webkit引擎新式徑向漸變。
Gecko引擎的CSS3的徑向漸變和Webkit引擎新式文法類似，隻是使用的字首不同而以：
Gecko引擎的Firefox浏覽器中Firefox3.6+版本支援徑向漸變。
Presto引擎的CSS3徑向漸變文法和Webkit引擎的新式文法類似，隻是使用的字首不同而以：
Presto引擎中的Opear11.6開始支援徑向漸變。
Trident引擎的浏覽器從IE10開始支援徑向漸變文法，其文法格式與Webkit引擎的新式文法類似，僅不同的是其字首不同，需要使用“-ms-”：
W3C組織從2013年04月開始給徑向文法推出新的文法規則：
不過支援徑向漸變文法的浏覽器，到寫這文稿時，僅有IE10+,Firefox16+浏覽器支援。
CSS3的徑向漸變相對于線性漸變要複雜的多，屬性參數也繁多複雜。CSS3徑向變中新老文法中的屬性參數定義如下：
<position>：主要用來定義徑向漸變的圓心位置。此值類似于CSS中background-position屬性，用于确定元素漸變的中心位置。如果這個參數省略了，其預設值為“center”。其值主要有以下幾種：
<length>：用長度值指定徑向漸變圓心的橫坐标或縱坐标。可以為負值。
<percentage>：用百分比指定徑向漸變圓心的橫坐标或縱坐标。可以為負值。
left：設定左邊為徑向漸變圓心的橫坐标值。
center：設定中間為徑向漸變圓心的橫坐标值或縱坐标。
right：設定右邊為徑向漸變圓心的橫坐标值。
top：設定頂部為徑向漸變圓心的縱标值。
bottom：設定底部為徑向漸變圓心的縱标值。
<shape>：主要用來定義徑向漸變的形狀。其主要包括兩個值“circle”和“ellipse”：
circle：如果<size>和<length>大小相等，那麼徑向漸變是一個圓形，也就是用來指定圓形的徑向漸變
ellipse：如果<size>和<length>大小不相等，那麼徑向漸變是一個橢圓形，也就是用來指定橢圓形的徑向漸變。
<size>：主要用來确定徑向漸變的結束形狀大小。如果省略了，其預設值為“farthest-corner”。可以給其顯式的設定一些關鍵詞，主要有：
closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；
farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊；
farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角；
如果<shape>設定了為“circle”或者省略，<size>可能顯式設定為<length>。表示的是用長度值指定徑向漸變的橫向或縱向直徑長度，并根據橫向和縱向的直徑來确定徑向漸變的形狀是圓或者是橢圓。此值不不能負值。
如果<shape>設定了“ellipse”或者省略，<size>可能顯式設定為 ［<length>|<percentage>］。主要用來設定橢圓的大小。第一個值代表橢圓的水準半徑，第二個值代表垂直半 徑。這兩個值除了使用<length>定義大小之外還可以使用<percentage>來定義這兩半徑大小。使 用<percentage>定義值是相對于徑向漸變容器的尺寸。同樣不能為負值。
<color-stop>：徑向漸變線上的停止顔色，類似于線性漸變的<color-stop>。徑向漸變的為漸變線從中 心點向右擴散。其中0%表示漸變線的起始點，100%表示漸變線的與漸變容器相交結束的位置。而且其顔色停止可以定義一個負值。
雖然徑向漸變要比線性漸變更為複雜，隻要了解了其基本文法以及相關屬性參數的作用，我想并不會需要花太多的時間去适應。接下來，我們通過實戰來加強徑向漸變的使用。下面的所有例子我們都在一個寬度為400像素，高為300像素的容器中實作。
先來看一個最簡單的徑向漸變，圓心都是容器正中間，從“hsla(120,70%,60%,.9)”顔色向“hsla(360,60%,60%,.9)”顔色實作徑向漸變：
效果如下圖所示：
CodePen的案例
如果你想制作一個圓形漸變，而不是一個橢圓形漸變，隻需要添加一個關鍵詞“circle”，我們在前例的基礎上添加一個關鍵詞“circle”：
正如你所看到的，圓形的漸變是一個特殊的橢圓漸變，水準半徑和垂直半徑具有相同的長度值。
既然圓形漸變是橢圓漸變的一種特殊情況，如果我們漸變主要半徑（水準半徑）和次要半徑（垂直半徑）不相同時就是一個橢圓形漸變。
正如上面所言，主要半徑和次要半徑不相等時，制作的徑向漸變是橢圓形漸變，在制作橢圓形漸變，可以使用關鍵詞“ellipse”：
除了使用關鍵詞制作不同的徑向漸變，還可以用不同的漸變參數制作徑向漸變效果，通過制作同心圓，主要半徑和次要半徑來決定徑向漸變的形狀。例如，圓 心位置都在“200px,150px”處，主要半徑為50px，次要半徑為150px，從“hsla(120,70%,60%,.9)”色到 “hsla(360,60%,60%,.9)”色徑向漸變：
上圖實作的是内徑小于外徑制作的徑向漸變效果，接着我們來看看圓心相同，内外半徑大小相同實作的漸變效果：
上圖效果告訴我們，當内外圓的圓心相同，并且主要半徑和次要半徑相等時，制作的漸變效果就等同于制作了一個圓形徑向漸變效果。接下來我們在看一個執行個體，圓心相同，主要半徑大于次要的半徑制作的徑向漸變：
除了使用<length>值之外，還可以使用<percentage>值，其具體使用細節類似于的使用方法：
除了上述方法能實作一些簡的徑向漸變效果之外，還可以使用漸變形狀配合圓心定位。主要使用“at”加上關鍵詞來定義徑向漸變中心位置。徑向漸變中心位置類似于background-position 屬性，可以使用一些關鍵詞來定義：
A）、center：設定徑向漸變中心位置在容器的中心點，相當于at 50％ 50％。類似于background-position:center。
B）、top：設定徑向圓心點在容器的頂邊中心點處，與at 50% 0%效果等效。類似于background-position的center top。
C）、right：設定徑向漸變圓心點在容器右邊中心點處，與at 100% 50%的效果等同。類似于background-position的right center。
D）、bottom：設定徑向漸變圓心點在容器底邊中心點處，剛好與“top”關鍵詞位置相反，與at 50% 100%效果等同。類似于background-position中的center bottom。
E）、left：設定徑向漸變圓心點在容器左邊中心點處，剛好與“right”關鍵詞位置相反，與at 0% 50%效果等同。類似于background-position的center left。
F）、top left：設定徑向漸變圓心點在容器的左角頂點處，與關鍵詞“let top”和at 0 0效果等同。類似于background-position的left top。
G）、top right：設定徑向漸變圓心點在容器右角頂點處，與“right top”關鍵詞與at 100% 0效果等同。類似于background-position的top right。
H）、bottom right：設定徑向漸變的圓心點在容器右下角頂點處，與關鍵詞“right bottom”和at 100% 100%效果等同。類似于background-position的bottom right。
I）、bottom left：設定徑向漸變圓心在容器左下角頂點處，與關鍵詞“left bottom”和 at 0% 100%效果等同。類似于background-position的bottom left。
綜合上面的執行個體以及對應的效果，大家在了解徑向漸變使用關鍵詞設定徑向漸變圓心位置，可以把其當作元素背景中的background-position屬性來了解。用來設定元素徑向漸變圓心的所有可用關鍵詞對照的位置關系，可以浏覽下圖：
前面分别給大家介紹了使用<size> 、漸變類型關鍵詞以及漸變類型配合關鍵詞制作的徑向漸變效果。除了上述方法可以制作一些徑向漸變效果之外，還可以使用<size>和漸變類型以及圓心關鍵詞結合制作一些徑向漸變效果。
當給元素顯式的設定了徑向漸變的大小，這兩個值設定了徑向漸變的水準和垂直半徑。如果一個徑向漸變包含徑向漸變類型“circle”和一個單一的大 小值，您就可以實作一個圓形的徑向漸變。如果一個徑向漸變包含了徑向漸變類型“ellipse”和兩個值，或者隻是兩個值，您就可以實作一個橢圓形的徑向 漸變。在設定徑向半徑大小值時，您可以使用任何CSS的機關長度值都有效。例如：
A)、使用20px circle制作一個徑向半徑為20px的圓形徑向漸變：
B）、使用2em 4em ellipse制作橢圓形徑向漸變，其中主要半徑為2em，次要半徑為4em。
C)、使用8em circle at top配合圓心位置關鍵詞制作一個圓形徑向漸變，其半徑大小為5em，圓心在top處。
除了通過<size>給徑向漸變顯式的設定大小之外，我們還可以通過關鍵詞隐式的為徑向漸變設定大小。其中的每個關鍵詞指定徑向漸變大 小的算法。也就是通過圓心指向徑向漸變的邊或者角來确定徑向漸變的大小。不過在圓形和橢圓形的徑向漸變之中，他們算出來的大小略有不同。雖然最初看上去似 乎有些複雜，一旦您了解了這些關鍵詞的意義，一切就變得簡單。
當使用closest-side來設定一個圓形徑向漸變大小，主要是通過徑向邊緣與離元素最近邊緣的切點到圓心之間的直線距離大決定。如下圖所示：
當使用closest-side來設定橢圓形徑向漸變大小，主要通過徑向漸變水準與垂直邊緣與離最近邊緣切點到圓心的直線距離大小決定。如下圖所示：
當使用closest-corner來設定圓形徑向漸變大小，主要通過漸變邊緣與到元素最近頂角交接點到圓心直線距離決定，如下圖所示：
當使用“closest-corner”來設定橢圓形徑向漸變大小，主要通過徑向漸變邊緣與到元素最近頂角交接點到圓心的直線距離大小決定，如下圖所示：
當使用“farthest-side”來設定圓形徑向漸變大小，主要通過徑向漸變邊緣與元素最遠邊的切點到圓心的直線距離大小決定，如下圖所示：
當使用“farthest-side”來設定橢圓形徑向漸變大小，主要通過徑向漸變與元素最遠邊切點到圓心的直線距離大小決定。如下圖所示：
當使用“farthest-corner”來設定圓形徑漸變的大小，主要通過徑向漸變邊緣與元素最遠頂角交點到圓心的直線距離決定，如下圖所示：
當使用“farthest-corner”來設定橢圓形徑向漸變，主要通過漸變邊緣與元素最遠頂點的交接點到圓心的直線距離決定，如下圖所示：
為了更好的說明這些關鍵詞的使用，下面的執行個體中，我們将圓心定義在“at 50% 75%”的位置，分别示範了“closest-side”、“closest-corner”、“farthest-side”和“farthest- corner”分别在圓形與橢圓形徑向漸變的效果。
在徑向漸變中，除了能設定徑向漸變的圓心位置、半徑大小之外，還可以設定徑向漸的顔色，前面我們示範的都是簡單的兩個顔色制作的徑向漸變，接下來通過<color-stop>屬性參數來設定徑向漸變的顔色。
下面我們在前面的基礎上增加一個顔色，實作三色漸變效果：
上面的示例是一個簡單的三色徑向漸變，隻是通過設定三個顔色，從容器的中心向外由紅色（red）、綠色（green）到藍色(blue)。這可以說是最簡單的了多色徑向漸變了，除此之外，我們還可以給每個顔色設定具體的顯示位置：
在徑向漸變中的漸變顔色，我們可以使用任何表示顔色的格式，并且确定漸變顔色的位置可以使用任何表示長度的機關值，同時顔色數量不會做任何限制，而且前面介紹有關于徑向漸變的屬性參數都可以配合多種顔色，制作出一些更特殊的徑向漸變效果：
上面主要介紹了漸變中的徑向漸變相關文法與基礎使用。接下來借此機會簡單的介紹一下重複漸變的一些基礎知識。
線性漸變和徑向漸變都屬于CSS中背景屬性中的背景圖檔（background-image）屬性。有時候我們希望建立一種在一個元素的背景上重複 的漸變“模式”。在沒有重複漸變的屬性之前，主要通過重複背景圖像（使用background-repeat）建立線性重複漸變，但是沒有建立重複的徑向 漸變的類似方式。幸運的是，CSS3通過“repeating-linear-gradient”和“repeating-radial- gradient”文法提供了補救方法。可以直接實作重複的漸變效果。
我們可以使用重複線性漸變“repeating-linear-gradient”屬性來代替線性漸變“linear-gradient”。他們采 取相同的值，但色标在兩個方向上都無限重複。不過使用百分比設定色标的位置沒有多大的意義，但使用像素和其他的機關，重複線性漸變可以建立一些很酷的效 果。例如下面的執行個體：
在這個例子中從開始紅色（red）向40px處的綠色（green）漸變，然後向80px處的橙色（orange）漸變。因為他是一個重複的線性漸變，它不斷以這個模式從上向下重複平鋪。如下圖所示：
以同樣的方式，你可以使用相關的屬性建立重複的徑向漸變。其文法和radial-gradient類似，隻是以一個徑向漸變為基礎進行重複漸變，如下例所示：
記事本我想大家都清楚，每張紙都有橫線條，左邊有兩條豎線從頂部延伸到底部。今天我們就一起使用重複漸變來制作這樣的紙張背景效果。我們不使用任何圖檔，隻使用CSS3的重複漸變在body上寫效果：
在這個效果中，僅重複漸變屬性是無法完成的，我們還需要CSS3的另一個屬性background-size，用來指定背景圖像的大小為100% 30px。盡管CSS3漸變顯示的是顔色，實際上他是一張圖像而不是顔色。
接下來使用僞類“:before”在紙張邊添加兩條豎線：
我們最終看到的效果如下圖所示：
CSS3的漸變的文法也幾經變化，不過讓前端設計師值得慶幸的是，直到寫本文的時候，CSS3的漸變文法在除了在Webkit的Sarfari浏覽器和IE10以下的浏覽器沒有得到支援之外，其他浏覽器對漸變支援都很穩定。
注:所列的是W3C的漸變标準文法在浏覽器相容性
在介紹CSS3漸變屬性的時候，就知道漸變的文法版本種類有多種，而各文法版本浏覽器的相容性也各有不同：
超老版本浏覽器供應商文法：Chrome4-9，Safari4-5
老版本浏覽器供應商文法：IE10+、Firefox3.6+、Chrome10+、Safari5.1+、Opera11.6+
新版本浏覽器供應商文法：Firefox10+、Opera11.6+
W3C标準文法：IE10+、Firefox19+、Chrome26+、Opear12.1+
超老版本浏覽器供應商文法：Chrome4-9、Safari4-5
老版本浏覽器供應商文法：IE10+、Firfox3.6+、Chrome10+、Safari5.1+、Opera11.6
對于IE9以前的版本，衆所周知他們并不支援CSS3漸變屬性，但我們可以使用IE的專有濾鏡來建立簡單的漸變。IE漸變濾鏡不支援色标、漸變角度和徑向漸變。我們能做的僅能指定水準和垂直的線性漸變，以及漸變的開始顔色和漸變的結束顔色。
如果需要為這些比較舊的浏覽器提供漸變效果，我們可以按照下面的濾鏡文法來實作：
文法中的GradientType參數主要用來設定漸變的方向，其中值為“1”表示的是水準線性漸變，值為“0”表示的是垂直線性漸變。
startColorstr參數主要用來設定或檢索色彩漸變的開始顔色和透明度。其值是可一個可選值。其值“#COLOR”格式為 “#AARRGGBB”。AA、RR、GG、BB為十六進制正整數，取值範圍為00到FF。RR指定紅色值，GG指定綠色值，BB指定藍色值，AA指定透 明度，00表示完全透明，FF則表示完全不透明。超出取值範圍的值将被恢複為預設值。取值範圍為“#FF000000”到“FFFFFFFF”，預設值為 “#FF0000FF”。
endColorstr參數主要用來設定或檢索色彩漸變的結束顔色和透明度。其值“#COLOR”的格式和“startColorstr”取值格式一樣。預設值為“#FF000000”。
CSS3漸變在衆多現代浏覽器中都得到較好的支援，因為他為不相容的浏覽器提供解決方案來說，較為容易。
使用圖檔。對于那些不支援CSS3漸變特性的浏覽器來說，最簡單的方法就是按照老方法來實作漸變：建立一個半透明 的PNG漸變圖檔。在使用這個解決方案的時候，必須注意一點，運用的圖檔要寫在CSS漸變屬性之前，隻有這樣才能讓支援漸變的浏覽器用創造漸變效果的 background-image屬性覆寫指定真實圖檔同名規則。
使用腳本。對于IE6-8相容CSS3的漸變效果，還可以使用PIE腳本。對于其他浏覽器，可以試試Weston Ruter的“用Canvas模拟CSS3漸變”的腳本。
采用純色。對于不相容的浏覽器，設定一個background-color色，使其在浏覽器中顯示為純色。
使用濾鏡。對于IE9以下的浏覽器相容CSS3的漸變效果，還可以采用IE專有的濾鏡文法。
在CSS3中漸變特性主要包括了線性漸變（linear-gradient）、徑向漸變（radial-gradient）、重複線性漸變 （repeating-linear-gradient）和重複徑向漸變（repeating-radial-gradient）四種。其中線性漸變和重 複線性漸變文法和使用相同，而徑向漸變和重複徑向漸變的文法與使用相同。并且詳細的介紹了各種漸變的基礎使用，以及浏覽器相容的處理方案。
從本質上來說，漸變就是背景屬性中的background-image。浏覽器直接将漸變生成圖檔，可以直接使用CSS背景屬性來控制他們，就像對待其他圖檔那樣。