談到漸變，大家並不陌生，設計稿中經常會遇到，其中最常見的也最平凡使用的是線性漸變和徑向漸變，在pc端開發，很多大型網站都需要考慮所有瀏覽器的兼容，通常如漸變的按鈕或者背景圖一般會被重構師們切成圖片，而在移動開發中如果使用圖片是很占流量，能不用圖片盡量不使用，那么，CSS3來實現無圖的漸變效果是首選的。
本文以移動開發中遇到的一個徑向漸變例子，講解CSS3徑向漸變在項目中的應用和以及需要注意的地方。
一、徑向漸變的基礎知識
徑向漸變的概念：從起點到終點顏色從內到外進行圓形漸變（從中間向外拉）。
二、徑向漸變的基本語法
background-image:-webkit-gradient(type,x1 y1,r1,x2 y2,r2,from(開始顏色值),to(結束顏色值),color-stop(偏移量小數,停靠顏色值),... );
第一組參數type（類型）為 radial，因為是徑向漸變；
第二組參數x1 y1,r1為第一個圓的圓心和半徑；
第三組參數x2 y2,r2為第二個圓的圓心和半徑；
第四組參數color-stop為漸變的中間過渡色，可以設置多組。
二、CSS3徑向漸變在ios和android系統的兼容測試
android2.x特別是2.1等較低的版本，並不完全支持，渲染出來的效果不豐富
二、CSS3徑向漸變最簡單的寫法
CSS3徑向漸變（radial）的代碼
.bg{ background:-webkit-gradient(radial,50% 50%,0,50% 50%,100,from(green),to(white)); }
代碼解釋如下，可以看出徑向漸變是2個圓組成，2個圓可分別設置不同的圓心和半徑，這里的圓心都為(50%,50%)，第一個50%是圓心距離X軸的距離，第二個50%是圓心距離Y軸的距離，
而第一個圓的半徑為0，第二個圓的漸變半徑為100。
運行代碼后視覺效果如下圖，可以看出以白色(white)結束后，白色填充了整個背景
大部分設計稿是一個顏色到另一個顏色的漸變，所以我們一般可以設置第一個圓漸變是起點，半徑為0，第二個圓的漸變結束點，開始設置半徑，這是最簡單的做法啦！然后也可能運到更多復雜的效果，這個需要你對CSS3漸變有深入的理解和使用
三、CSS3徑向漸變的中間過渡色color-stop
color-stop到底是怎么使用的呢，看下來自Photoshop漸變編輯器的圖片:
為了明顯的看到效果，代碼中從綠色到紫色的徑向漸變，50%處中間過渡色為紅色，80%處為黃色
.bg{ background:-webkit-gradient(radial,50% 50%,0, 50% 50%,100,from(green), to(purple),color-stop(50%,red),color-stop(80%,yellow));
}
運行代碼后視覺效果如下圖：
四、CSS3徑向漸變實戰
設計稿給過來的背景圖，2層的線性漸變疊加，要如何實現呢？
上圖，我們來分析下，
最頂層（圖層8）為黃色漸變到透明，在半徑在40到180之間由70%的透明度漸變到0%，也就是漸變完全透明。
-webkit-gradient(radial,50% 50%,40,50% 50%,180,from(rgba(249,161,22,0.7)),to(rgba(249,161,22,0)));
//rgba為aplha通道的RGB顏色，在最后一個參數設定，通道值范圍為0~1.0,0表示完全透明，1表示不透明
中間一層（圖層7）為橙色漸變到透明，在半徑在80到250之間由100%的透明度漸變到0%
-webkit-gradient(radial,50% 50%,80,50% 50%,250,from(rgba(249,109,22,1)),to(rgba(249,109,22,0)));
紅色底（圖層4）
background-color:#EE1D25;
小技巧：通常情況下CSS屬性值中，后出現的屬性值會覆蓋前面的屬性，而-webkit-gradient中多層背景漸變是放在同一個屬性值時，先出現的值至於最頂層，從上到下的順序展示，像多個div使用z-index的后有層級高低的表現，由此我們把上面的代碼合並如下：
.bg{ background-image:-webkit-gradient(radial,50% 50%,40,50% 50%,180,from(rgba(249,161,22,0.7)),to(rgba(249,161,22,0))), -webkit-gradient(radial,50% 50%,80,50% 50%,250,from(rgba(249,109,22,1)),to(rgba(249,109,22,0))); background-color:#EE1D25; }
ok！搞定~