CSS3 径向渐变（radial-gradient）

March 2, 2015

CSS3 径向渐变是起源于原点（渐变中心）的圆形或椭圆形的颜色渐变。

实现的就是ps中径向渐变的效果。

##径向渐变语法##

radial-gradient( [ circle || &lt;length&gt; ] [ at &lt;position&gt; ]? ,
| [ ellipse || [&lt;length&gt; | &lt;percentage&gt; ]{2}] [ at &lt;position&gt; ]? ,
| [ [ circle | ellipse ] || &lt;extent-keyword&gt; ] [ at &lt;position&gt; ]? ,
| at &lt;position&gt; ,
&lt;color-stop&gt; [ , &lt;color-stop&gt; ]+ )

shape：主要确定径向渐变的形状。主要包括两个值circle（圆）和ellipse（椭圆）。默认值ellipse。

size：主要用来确定径向渐变的大小。可以理解为上面代码中的<length> <percentage> <extend-keyword>。当其值为<length> 或<percentage>时，只设一个代表圆的半径，两个代表椭圆的半长轴和半短轴。

extent-keyword：默认值farthest-corner。

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

position：定义渐变圆心的位置，类似于background-position，默认值center。

color-stop：径向渐变线上的停止颜色，其中0%表示渐变线的起始点，100%表示渐变线的与渐变容器相交结束的位置。