徑向漸變
徑向漸變就是橢圓漸變，圓是橢圓的特殊形式，徑向漸變從圓心點以橢圓的形式向外擴散，漸變的實現由兩部分組成：橢圓和色標，橢圓控制漸變的位置、大小和形狀；色標控制漸變的顏色和位置。
語法： radial-gradient([[shape|<size>]? [at <position>,]]? <color-stop>[,<color-stop>]+)
演示效果
橢圓
影響橢圓的參數有<position>, <shape>, <size>，分別控制橢圓的圓心、形狀和大小
position
<position>: x軸 y軸
x軸:<length> | <percentage> | left | center | right
y軸:<length> | <percentage> | top | center | bottom
關鍵字是百分比的特殊表現形式
left -> 0% center -> 50% right -> 100%
top: -> 0% center -> 50% right -> 100%
例2演示了left center關鍵字的效果
當屬性值為數值時，x軸數值表示圓心在x軸上距離0點（漸變框左上角）的偏移量，y軸數值表示圓心在y軸上距離0點的偏移量。
例3演示了數值效果
當屬性值為百分比時，x軸數值相對於漸變框寬度，y軸數值相對於漸變框高度。
例4演示了百分比效果
當屬性值只有一個值時，第二值默認center
shape
shape定義漸變的形狀是圓circle還是橢圓ellipse，默認值橢圓。
例5和例6演示了圓形和橢圓形漸變效果
size
size定義漸變的大小，默認值farthest-corner。
size為關鍵字
closest-side:半徑為從圓心到最近邊
closest-corner:半徑為從圓心到最近角
farthest-side:半徑為從圓心到最遠邊
farthest-corner:半徑為從圓心到最遠角
例7到例10演示了四個屬性值的效果，下面一張圖解釋了四個屬性值所代表的具體含義
size為數值
如果只有一個值時，漸變是圓形的，size值可以是length，表示漸變的半徑，不能是百分比，因為瀏覽器不知道百分比是相對於漸變框的寬度還是高度
如果有兩個值時，漸變是橢圓的，表示漸變的水平半徑和垂直半徑，size值可以是length或百分比，百分比相對於漸變框的寬高。
色標
色標在上一篇文章理解CSS線性漸變linear-gradient中已介紹，徑向漸變的色標與之類似，不同的是當漸變不能充滿整個漸變框時，瀏覽器使用最后一種色標的顏色填充剩余區域。
重復漸變(repeating-radial-gradient)
例13演示了重復漸變
上面說過瀏覽器會使用色標的最后一種顏色填充未充滿漸變的區域，但是當使用重復漸變時，瀏覽器會使用漸變填充未充滿漸變的區域