购物车
登陆 / 注册
微信扫码登陆

推荐手册

repeating-radial-gradient()

repeating-radial-gradient()
创建一个从原点辐射的重复渐变组成的<image> 。它类似于radial-gradient 并且采用相同的参数,但是它会在所有方向上重复颜色,以覆盖其整个容器
编辑:前端控 前端控 更新时间:2019-03-21 15:15:48

repeating-radial-gradient()


语法:

<repeating-radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

<position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

<shape> = circle | ellipse

<size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]

<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner

<circle-size> = <length>

<ellipse-size> = [ <length> | <percentage> ]{2}

<shape-size> = <length> | <percentage>

<color-stop> = <color> [ <length> | <percentage> ]?

取值:

<position> 确定圆心的位置。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个,第二值默认为50%,即center

  • <percentage>①:
  • 用百分比指定径向渐变圆心的横坐标值。可以为负值。
  • <length>①:
  • 用长度值指定径向渐变圆心的横坐标值。可以为负值。
  • left:
  • 设置左边为径向渐变圆心的横坐标值。
  • center①:
  • 设置中间为径向渐变圆心的横坐标值。
  • right:
  • 设置右边为径向渐变圆心的横坐标值。
  • <percentage>②:
  • 用百分比指定径向渐变圆心的纵坐标值。可以为负值。
  • <length>②:
  • 用长度值指定径向渐变圆心的纵坐标值。可以为负值。
  • top:
  • 设置顶部为径向渐变圆心的纵坐标值。
  • center②:
  • 设置中间为径向渐变圆心的纵坐标值。
  • bottom:
  • 设置底部为径向渐变圆心的纵坐标值。

<shape> 确定圆的类型

  • circle:
  • 指定圆形的径向渐变
  • ellipse:
  • 指定椭圆形的径向渐变。

<extent-keyword> circle | ellipse 都接受该值作为 size

  • closest-side:
  • 指定径向渐变的半径长度为从圆心到离圆心最近的边
  • closest-corner:
  • 指定径向渐变的半径长度为从圆心到离圆心最近的角
  • farthest-side:
  • 指定径向渐变的半径长度为从圆心到离圆心最远的边
  • farthest-corner:
  • 指定径向渐变的半径长度为从圆心到离圆心最远的角

<circle-size> circle 接受该值作为 size

  • <length>:
  • 用长度值指定正圆径向渐变的半径长度。不允许负值。

<ellipse-size> ellipse 接受该值作为 size

  • <length>:
  • 用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
  • <percentage>:
  • 用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

<color-stop> 用于指定渐变的起止颜色:

  • <color>:
  • 指定颜色。
  • <length>:
  • 用长度值指定起止色位置。不允许负值
  • <percentage>:
  • 用百分比指定起止色位置。不允许负值

说明:

用重复的径向渐变创建图像。repeating-radial-gradient()的语法与radial-gradient()相同。

例:

repeating-radial-gradient(circle closest-side, #f00, #ff0 10%, #f00 15%);

兼容性:

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
6.0-9.02.0-3.5

4.0

-9.0-webkit- 

3.1-3.215.0+

3.2

-4.3-webkit- 

2.1-

3.0-webkit- 

10.0-

25.0-webkit- 

10.0+

3.6-

15.0-moz-

10.0

-25.0-webkit-

4.0

-5.0-webkit- 

5.0-6.1

4.0

-4.3-webkit-

26.0+
16.0+26.0+

5.1

-6.0-webkit-

7.0+4.4+
6.1+
-webkit- 表示使用过时的语法:-webkit-gradient(radial,…)


网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号