• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3的重复放射性线性渐变——repeating-radial-gradient

    CSS3的重复放射性线性渐变——repeating-radial-gradient

    作者: 分类:HTML5与CSS3.0 点击: 213 次
    wordpress CMS主题:ssmay主题

      repeating-radial-gradient重复性放射渐变和radial-gradient放射渐变的参数都是一样的,差别在于是否利用渐变单元扩展至整个容器。

       

      一、语法结构

      repeating-radial-gradient(
      [[ circle  || <length> ]                                   [at <position>]? , |
      [ ellipse || [<length> | <percentage> ]{2}]  [at <position>]? , |
      [[ circle | ellipse ] || <extent-keyword> ]     [at <position>]? , |
      at <position>   ,    <color-stop> [ , <color-stop> ]+ )
      \---------------------------------------------------------------/\--------------------------------/
      Contour, size and position of the ending shape               List of color stops

      where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
      and <color-stop> = <color> [ <percentage> | <length> ]?

      语法结构看着吓人,其实拆分出来也就几个关键点。

       

      1、形状

      是circle圆形还是ellipse椭圆形。如果缺省的话,默认是椭圆形。可以指定圆形的半径值length,圆形的半径值只能是固定的像素值,比如circle 30px,椭圆形可以指定固定像素值length,还可以指定百分比的值,但是要分别指定x轴和y轴的两个半径值。

      除了指定半径值之外,还可以用extent-keyword指定的四个值来表示半径值。 closest-corner | closest-side | farthest-corner | farthest-side

      2、中心点的位置

      放射性渐变需要指定中心点,这个位置的定位和background-position背景定位的用法是一样一样的。比如 at left top,at 10% 40%,如果缺省,默认为 at center。

      3、color-stop

      由颜色和颜色的位置构成,与线性渐变的用法没有区别。

      4、extent-keyword

      用四个值来确定放射的范围。其实可以用contain和cover来理解,closest的两个值,产生的渐变范围都在容器内,可以表示为contain包含关系。farthest的两个值产生的渐变范围都会覆盖整个容器,还会超出容器的区域,用cover覆盖来理解。

      CSS3的重复放射性线性渐变——repeating-radial-gradient

      二、案例

      1、普通的圆环

      2、渐变色圆环

      3、结合background-size实现重复效果

      其实很多酷炫的效果在界面设计上并没有多大的作用,关键是锻炼自己的理解能力和对属性的运用能力。



      QQ二维码

    文章作者:andy
    本文地址:http://wanlimm.com/77201809056794.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.