时间:2021-07-01 10:21:17 帮助过:21人阅读
: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以外浏览器都需要使用各自的浏览器兼容写法。
实例代码:
蚂蚁部落
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=1147