重复径向渐变 | repeating-radial-gradient()

repeating-radial-gradient()创建一个由重复的梯度从原点辐射的<image>。它类似于radial-gradient(), 并采取相同的参数, 但它重复的颜色停止无限在所有方向, 以覆盖其整个容器。函数的结果是<gradient>数据类型的一个对象，这是一种特殊的类型<image>。

/* A repeating gradient at the center of its container,
   starting red, changing to blue, and finishing green */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);

每重复一次，彩色光圈的位置偏移基本径向梯度的尺寸（最后一个彩色光圈和第一个颜色光圈之间的距离）的倍数。因此，每个结束彩色停止的位置与起始彩色停止一致; 如果颜色值不同，这将导致一个清晰的视觉过渡。

与任何梯度一样，重复的径向梯度具有没有内在维度也就是说，它没有自然的或优先的大小，也没有优先的比率。它的具体大小将与它所应用的元素的大小相匹配。

使用说明：由于<gradient>属于<image>数据类型，因此只能在可以使用<image>的地方使用。出于这个原因，repeating-radial-gradient()将不能在background-color其他使用<color>数据类型的属性上工作。

句法

取值

<position>渐变的位置，以与background-position或相同的方式解释transform-origin。如果未指定，则默认为center。<angle>渐变线的角度，从此角度的起点延伸。如果未指定，则默认为0deg。<shape>渐变的形状。值可以是circle（意思是渐变的形状是一个具有恒定半径的圆）或ellipse（意思是该形状是一个轴对齐的椭圆）。如果未指定，则默认为ellipse。<extent-keyword>描述结尾形状必须有多大的关键字。可能的值是：

Keyword	Description
closest-side	The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
closest-corner	The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center.
farthest-side	Similar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
farthest-corner	The gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center.

注意：此函数的早期实现包括其他关键字（cover和contain）作为标准的同义词farthest-corner和closest-side分别。仅使用标准关键字，因为某些实现已经删除了这些旧的变体。

<color-stop>一个颜色停止的<color>值，后跟一个可选的停止位置（<percentage>或<length>沿着渐变轴）。百分比0%或长度0代表渐变的中心; 该值100%表示结束形状与虚拟梯度射线的交集。两者之间的百分比值线性定位在梯度射线上。

形式语法

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> ]?

实例

径向梯度沿轴运动。在轴的每个端点，指定一个半径。这可以想象为创建两个“圆”，其中每个圆的中心由点指定，半径由半径长度指定。梯度从内圆的圆周向外圆的圆周向外延伸。

黑白梯度

<div id="grad1">Black white</div>

div {
  display: block;
  width: 50%;
  height: 80px;
  border-color: #000000;
  padding: 10px;
}
#grad1 {
  background: -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -ms-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -o-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  text-shadow: 1px 1px 0pt black;
  color: white;
  border: 1px solid black;
  height:5.5em;
}

background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

最远角

<div id="grad1">Farthest-corner</div>

div {
  display: block;
  width: 50%;
  height: 80px;
  border-radius: 10px;
  border-color: #000000;
  padding: 10px;
}
#grad1 {
  background: -webkit-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -moz-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -ms-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -o-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  text-shadow: 1px 1px 0pt blue;
  color: white;
  border: 1px solid black;
  height:5.5em;
}

background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);

规格

Specification	Status	Comment
CSS Image Values and Replaced Content Module Level 3The definition of 'repeating-radial-gradient()' in that specification.	Candidate Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support (on background and background-image)	10 -webkit	3.6 (1.9.2)-moz 16 (16)1	10	12 -o 12.5	5.1 -webkit
On border-image	(Yes)	29 (29)	(Yes)	(Yes)	(Yes)
On any other property that accept <image>	No support	(Yes)	(Yes)	(Yes)	(Yes)
Interpolation hints (a percent without a color)	40	36 (36)	?	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support (on background and background-image)	4.4	46.0 (46)	10	12.1	7.1
On border-image	29.0 (29)	(Yes)	(Yes)	(Yes)	(Yes)
On any other property that accept <image>	No support	(Yes)	(Yes)	(Yes)	(Yes)

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18