上一篇文章主要講解了線性漸變，這篇文章主要對(duì)徑向漸變進(jìn)行詳解，也是分為帶內(nèi)核和不帶內(nèi)核兩種情形。
1 帶內(nèi)核的徑向漸變，這里以moz為例，其它內(nèi)核語(yǔ)法一樣。
(帶有內(nèi)核）徑向漸變
語(yǔ)法：
-moz-radial-gradient(原點(diǎn)位置,形狀+半徑,顏色 位置,顏色 位置);
示例：
-moz-radial-gradient(center,circle,white 10%,black 50%);
參數(shù)詳解：
原點(diǎn)位置:可以用px/left bottom 表示
僅用一個(gè)px表示,其表示x方向位置，y方向位置默認(rèn)為正中間;如果兩個(gè)px,分別表示x和y方向位置.
形狀：circle（圓）,ellipse（橢圓）
直徑：原點(diǎn)到遠(yuǎn)角，遠(yuǎn)邊，近邊，近角的距離，其可以用來(lái)確定漸變直徑。
顏色: 漸變顏色
位置：漸變顏色的終點(diǎn)位置
注意：半徑省略默認(rèn)直徑為原點(diǎn)到遠(yuǎn)角的距離，位置省略默認(rèn)為中心點(diǎn)。形狀也可省略。
帶內(nèi)核徑向漸變代碼
background: -moz-radial-gradient(left,circle,red 10%,yellow 50%,green 50%);
/* background: -moz-radial-gradient(50px,ellipse,red 10%,yellow 50%,green 51%);*/
/* background: -moz-radial-gradient(center,closest-corner circle,red 10%,yellow 50%,green 50%); */
/* background: -moz-radial-gradient(circle,red 10%,yellow 50%,green 50%); */
/* background: -moz-radial-gradient(circle closest-side,red 10%,yellow 50%,green 50%);*/
效果圖如下：
對(duì)比圖.png
結(jié)論：
當(dāng)原點(diǎn)位置省略，默認(rèn)為中心點(diǎn)；
當(dāng)半徑省略，漸變直徑默認(rèn)為原點(diǎn)到最遠(yuǎn)角的距離，圖四直徑為225。
2 不帶內(nèi)核的徑向漸變
(不帶內(nèi)核)徑向漸變：
radial-gradient(形狀+半徑 at 位置,顏色 漸變位置,顏色 漸變位置);
示例：
background: radial-gradient(circle,red 10%,yellow 50%,green 65%);
參數(shù)解析
形狀取值：circle,ellipse/px
一個(gè)px表示x和y方向的直徑,兩個(gè)px分別表示x和y的直徑
半徑： 可以為遠(yuǎn)角，近邊等／px
形狀是circle，只能給一個(gè)px，表示直徑。
形狀是ellipse，必須給兩個(gè)px，表示x和y方向直徑
位置取值：可以為px／left
注意：半徑省略默認(rèn)直徑為原點(diǎn)到遠(yuǎn)角的距離，位置省略默認(rèn)為中心點(diǎn)。形狀也可省略。
代碼如下：
.b{
/* background: radial-gradient(100px 200px at 50px 100px,red 10%,yellow 30%,green 65%); */
/* background: radial-gradient(circle at 50px 100px,red 10%,yellow 30%,green 65%); */
/* background: radial-gradient(ellipse 50px 100px,red 10%,yellow 50%,green 65%); */
/* background: radial-gradient(30px 100px at center,red 10%,yellow 50%,green 65%); */
/* background: radial-gradient(circle at left,red 10%,yellow 50%,green 65%); */
/* background: radial-gradient(ellipse closest-side at 140px,red 10%,yellow 50%,green 65%);*/
}
對(duì)比圖效果：
對(duì)比圖1.png
結(jié)論：
如果沒(méi)有確定位置，則位置位于center位置；
如果沒(méi)有確定大小，直徑為原點(diǎn)到最遠(yuǎn)角的距離（farthest-corner）。
