css3 渐向径变之《radial-gradient》

发布时间:2020-07-13 17:51:10 作者:zx331789
来源:网络 阅读:534

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:用百分比指定起止色位置。不能为负值。

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


推荐阅读:
  1. css3过渡图画转换
  2. CSS3中渐变的实现方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3 gradient radial

上一篇:请求要素是json字符串时,php如何获取原生请求体

下一篇:中小型网络构建——VRRP的应用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》