談到漸變，大家并不陌生，設計稿中經常會遇到，其中最常見的也最平凡使用的是線性漸變和徑向漸變，在pc端開發，很多大型網站都需要考慮所有浏覽器的相容，通常如漸變的按鈕或者背景圖一般會被重構師們切成圖檔，而在移動開發中如果使用圖檔是很占流量，能不用圖檔盡量不使用，那麼，css3來實作無圖的漸變效果是首選的。
本文以移動開發中遇到的一個徑向漸變例子，講解css3徑向漸變在項目中的應用和以及需要注意的地方。
一、徑向漸變的基礎知識
徑向漸變的概念：從起點到終點顔色從内到外進行圓形漸變（從中間向外拉）。
二、徑向漸變的基本文法
第一組參數type（類型）為 radial，因為是徑向漸變；
第二組參數x1 y1,r1為第一個圓的圓心和半徑；
第三組參數x2 y2,r2為第二個圓的圓心和半徑；
第四組參數color-stop為漸變的中間過渡色，可以設定多組。
二、css3徑向漸變在ios和android系統的相容測試
android2.x特别是2.1等較低的版本，并不完全支援，渲染出來的效果不豐富
二、css3徑向漸變最簡單的寫法
css3徑向漸變（radial）的代碼
代碼解釋如下，可以看出徑向漸變是2個圓組成，2個圓可分别設定不同的圓心和半徑，這裡的圓心都為(50%,50%)，第一個50%是圓心距離x軸的距離，第二個50%是圓心距離y軸的距離，
而第一個圓的半徑為0，第二個圓的漸變半徑為100。
運作代碼後視覺效果如下圖，可以看出以白色(white)結束後，白色填充了整個背景
大部分設計稿是一個顔色到另一個顔色的漸變，是以我們一般可以設定第一個圓漸變是起點，半徑為0，第二個圓的漸變結束點，開始設定半徑，這是最簡單的做法啦！然後也可能運到更多複雜的效果，這個需要你對css3漸變有深入的了解和使用
三、css3徑向漸變的中間過渡色color-stop
color-stop到底是怎麼使用的呢，看下來自photoshop漸變編輯器的圖檔:
為了明顯的看到效果，代碼中從綠色到紫色的徑向漸變，50%處中間過渡色為紅色，80%處為黃色
運作代碼後視覺效果如下圖：
四、css3徑向漸變實戰
設計稿給過來的背景圖，2層的線性漸變疊加，要如何實作呢？
上圖，我們來分析下，
最頂層（圖層8）為黃色漸變到透明，在半徑在40到180之間由70%的透明度漸變到0%，也就是漸變完全透明。
中間一層（圖層7）為橙色漸變到透明，在半徑在80到250之間由100%的透明度漸變到0%
紅色底（圖層4）
小技巧：通常情況下css屬性值中，後出現的屬性值會覆寫前面的屬性，而-webkit-gradient中多層背景漸變是放在同一個屬性值時，先出現的值至于最頂層，從上到下的順序展示，像多個div使用z-index的後有層級高低的表現，由此我們把上面的代碼合并如下：
ok！搞定~
<a href="http://www.cnblogs.com/peunzhang/admin/%ef%bc%9ahttp:/files.cnblogs.com/peunzhang/gradient-radial.zip" target="_blank">代碼下載下傳</a>
作者：白樹