首页 > HTML5与CSS3.0 > CSS3的重复放射性线性渐变——repeating-radial-gradient

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

作者: 分类:HTML5与CSS3.0 点击: 5,078 次

    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实现重复效果

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



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

上一篇:
下一篇:

或许你会感兴趣的文章:

一条回应:“CSS3的重复放射性线性渐变——repeating-radial-gradient”

  1. avatar 鹤望岚说道:

    太恶心了,你们到底剽窃了我多少文章。

发表评论

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

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