CSS3 图像取值 radial-gradient()

发布时间:2019-10-01编辑:佚名阅读(717)

CSS3 图像取值 radial-gradient()

说明:本文档兼容性测试基础环境为:windows系统;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

语法:

<radial-gradient>:radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);

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

<shape>:circle | ellipse

<size>:closest-side | closest-corner | farthest-side | farthest-corner | contain | cover

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

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

取值:

<position>

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

<shape>

circle: 指定圆形的径向渐变
ellipse: 指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值

<size>

closest-side: 指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner: 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side: 指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner: 指定径向渐变的半径长度为从圆心到离圆心最远的角
contain: 包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover: 覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner

<shape-size>

写本文档时Firefox尚不支持<shape-size>
<percentage> 用百分比指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<length> 用长度值指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。

<color-stop>

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

说明:

用径向渐变创建图像。
  • 写本文档时Firefox和Chrome已经在实验性质阶段支持了该属性,Safari对该属性的支持仍停留在以私有方式实现的阶段。
  • 示例代码:


    (图一)

    radial-gradient(circle,#f00,#ff0,#080);
    radial-gradient(center,circle,#f00,#ff0,#080);
    radial-gradient(50%,circle,#f00,#ff0,#080);
    radial-gradient(circle,#f00 0%,#ff0 50%,#080 100%);
    radial-gradient(circle cover,#f00,#ff0,#080);
    

    以上几句代码都可以实现如(图一)的渐变效果

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6-9 4-18 5.1.7 13-23 11.5-12.51
版本 10 11.6-12.5

  关键字:CSS3图像取值radial-gradient


鼓掌

0

正能量

0

0

呵呵

0


评论区