重复径向渐变 | repeating-radial-gradient() (Image Values) - CSS 中文开发手册

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>描述结尾形状必须有多大的关键字。可能的值是：

注意：此函数的早期实现包括其他关键字（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%);

规格

浏览器兼容性