css3 渐向径变之《radial-gradient》

1.语法

-moz-radial-gradient([<bg-position>||<angle>,]?[<shape>||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);-webkit-radial-gradient([<bg-position>||<angle>,]?[<shape>||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

<bg-position>：渐变起始位置

参数：[<length>① |<percentage>① | left | center① | right ]? [<length>② |<percentage>② | top | center② | bottom ]?

<length>:用长度值指定径向渐变圆心的横坐标值。可以为负值。

<percentage>:用百分比指定径向渐变圆心的横坐标值。可以为负值。

left:设置左边为径向渐变的横坐标值。

center:设置中间为径向渐变圆心的横坐标值。

right:设置右边为径向渐变圆心的横坐标值。

<shape>：渐变形状

参数：[circle |ellipse]

circle ：圆形渐变；

ellipse：椭圆渐变；

<size>: 渐变大小

参数:[closest-side |closest-corner |farthest-side |farthest-corner]

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

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

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

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

<color-stop>:用于指定渐变的起止颜色

参数：[<color> ? <length | percentage>, <color> ? <length | percentage> , <color> ? <length | percentage>]

颜色不能少于两种

color:指定颜色

length:用长度值指定起止色位置。不能为负值。

percentage:用百分比指定起止色位置。不能为负值。

注：起止色位置值是累加计算 ，第二个颜色必须大于第一个，第三个颜色位置必须大于第一个与第二个的和；