：radial-gradient([ ,]? [ [ || ] | {2},]? [, ]+); ：[ ① | ① | left | center① | right ]? [ ② | ② | top | center② | bottom ]? ：circle | ellipse ：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover ： | ： [ | ]? 取值:
①：用百分比指定径向渐变圆心的横坐标值。可以为负值。
①：用长度值指定径向渐变圆心的横坐标值。可以为负值。
left：设置左边为径向渐变圆心的横坐标值。
center①：设置中间为径向渐变圆心的横坐标值。
right：设置右边为径向渐变圆心的横坐标值。
②：用百分比指定径向渐变圆心的纵坐标值。可以为负值。
②：用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top：设置顶部为径向渐变圆心的纵坐标值。
center②：设置中间为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。
：指定渐变的起止颜色。
circle：指定圆形的径向渐变。
ellipse：指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值。
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边。
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角。
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边。
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角。
contain：包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side。
cover：覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner
写本文档时Firefox尚不支持 。
：用百分比指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
：用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
：指定颜色。
：用长度值指定起止色位置，不允许负值。
：用百分比指定起止色位置。
浏览器支持:
主流浏览器都支持此属性。
1.IE9和IE9以下浏览器不支持此属性。
2.Opera11.60以下不支持此属性。
3.IE以外浏览器都需要使用各自的浏览器兼容写法。
实例代码:
蚂蚁部落 div{ width:200px; height:100px; margin-top:10px; border:1px solid #ddd;}.test{ background:-moz-radial-gradient(center center, circle, #f00, #ff0, #080); background:-webkit-radial-gradient(center center, circle, #f00, #ff0, #080); background:-o-radial-gradient(center center, circle, #f00, #ff0, #080); background:-ms-radial-gradient(center center, circle, #f00, #ff0, #080); background:radial-gradient(center center, circle, #f00, #ff0, #080);}.test2{ background:-moz-radial-gradient(circle contain, #f00, #ff0, #080); background:-webkit-radial-gradient(circle contain, #f00, #ff0, #080); background:-o-radial-gradient(circle contain, #f00, #ff0, #080); background:-ms-radial-gradient(circle contain, #f00, #ff0, #080); background:radial-gradient(circle contain, #f00, #ff0, #080);}.test3{ background:-moz-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%); background:-webkit-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%); background:-o-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%); background:-ms-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%); background:radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);}.test4{ background:-moz-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080); background:-webkit-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080); background:-o-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080); background:-ms-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080); background:radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);}
查看更多关于CSS的取值radial-gradient()_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did110801