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:用百分比指定起止色位置。不能为负值。
注:起止色位置值是累加计算 ,第二个颜色必须大于第一个,第三个颜色位置必须大于第一个与第二个的和;
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。