前面的話
上篇介紹了線性漸變，本文接着介紹徑向漸變的內容
定義
徑向漸變，實際上就是橢圓漸變，圓只是一種特殊的橢圓而已。徑向漸變從圓心點以橢圓形狀向外擴散，漸變的實現由兩部分組成：橢圓和色標。橢圓部分用來控制徑向漸變的位置、大小和形狀等。而色標部分包含一個顏色值和一個位置，用來控制漸變的顏色變化
[注意]safari4-5、IOS3.2-4.3、android2.1-3只支持線性漸變，且需要添加-webkit-；safari5.1-6、IOS5.1-6.1、android4-4.3支持線性和徑向漸變，且需要添加-webkit-；IE10+及其他高版本瀏覽器支持標准寫法
//標准寫法 radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+) //-webkit-老版本徑向漸變的寫法 -webkit-radial-gradient([<position>||<angle>,]? [<shape>||<size>,]>?<color-stop>[,<color-stop>]+)
橢圓
徑向漸變方式主要由<position>、<shape>、<size>這三個參數影響，分別控制橢圓的圓心、形狀和大小
position
定義漸變的圓心，默認是center center
<position>: x軸 y軸
x軸:<length> | <percentage> | left | center | right
y軸:<length> | <percentage> | top | center | bottom
[注意]和線性漸變類似，舊版本-webkit-內核瀏覽器並不支持at <position>的寫法，只支持<position>的寫法
【1】關鍵字
x軸 left: 0% center: 50% right: 100% y軸 top: 0% center: 50% bottom: 100%
【2】數值
x軸數值表示在x軸上離0點(漸變框左上角)的偏移量；y軸數值表示在y軸上離0點的偏移量
【3】百分比
其中x軸的百分比相對於漸變框的寬度，而y軸的百分比相對於漸變框的高度。漸變框的寬高由background-size決定
【4】單個值
當只有一個值時，默認第二個值為center
shape
定義漸變的形狀是圓circle或橢圓ellipse。默認是橢圓
<shape>: circle | ellipse
size
定義漸變的大小。默認是farthest-corner
【1】關鍵字
<size>: closest-side | closest-corner | farthest-side | farthest-corner
closest-side:半徑為從圓心到最近邊 closest-corner:半徑為從圓心到最近角 farthest-side:半徑為從圓心到最遠邊 farthest-side:半徑為從圓心到最遠角
//左上為最近角，右上為最近邊；左下為最遠角，右下為最遠邊
 |
 |
 |
 |
【2】圓
如果<shape>是circle，則<size>可以設置為<length>，表示直徑，0%表示圓心，100%表示距離圓心為半徑的點
[注意]不能為負值也不可以設置百分比
[注意]webkit內核瀏覽器支持使用CSS設置圓的<length>型的<size>，但並不支持javascript改變其值；對於safari瀏覽器來說，只有半徑寫在circle關鍵字前面才識別
//以下DEMO只有IE10+及firefox可以正常運行
【3】橢圓
如果<shape>是ellipse或不設置時，則<size>可以設置為<length>或<percentage>，第一個值表示水平直徑，第二個值表示垂直直徑。百分比相對於徑向漸變容器的尺寸
[注意]若只有一個值，則表示水平和垂直直徑相同，因為圓是特殊的橢圓，所以一個值時不可以為百分比
[注意]和圓類似，<size>值不能為負值，因為其表示的是直徑
[重要]由於webkit瀏覽器在使用circle或ellipse關鍵字時渲染不正常，所以若使用circle時，可以不寫shape(默認為ellipse)，用水平和垂直直徑相同的橢圓替代
色標
與線性漸變的色標相同的部分不再重復，這里只說明不同的部分。由於位置處於100%的色標有時並不會占滿漸變區域，則瀏覽器會默認使用最后一個色標的顏色鋪滿漸變區域
<color-stop> = <color> [ <percentage> | <length> ]?
重復漸變
重復漸變可以實現徑向漸變的重復效果，使色標在橢圓方向上無限重復，實現一些特殊的效果
[注意]只有當首尾兩顏色位置不在0%或100%時，重復漸變才生效
background-image: -webkit-repeating-radial-gradient(blue 20%,green 50%); background-image: repeating-radial-gradient(blue 20%,green 50%);