CSS的repeating-radial-gradient()属性-径向渐变

创建由重复的，从原点放射渐变的图像。它类似于并采用相同的参数，但它在所有方向上无限重复颜色停止以覆盖其整个容器.
demo如下:

background: repeating-radial-gradient(#e66465, #9198e5 20%);

图片显示如下：

background: repeating-radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

图片显示如下：

background: repeating-radial-gradient(circle at 100%, #333, #333 10px, #eee 10px, #eee 20px);

图片显示如下：

每次重复时，色标的位置都会移动基本径向渐变维度的倍数（最后一个色标和第一个色标之间的距离）。因此，每个结束色标的位置与起始色标一致；如果颜色值不同，这将导致明显的视觉过渡，可以通过将第一种颜色重复为最后一种颜色来缓解这种情况。

与任何渐变一样，重复的径向渐变没有内在尺寸；即，它没有自然或首选尺寸，也没有首选比例。它的具体大小将匹配它所应用的元素的大小。

因为<gradient>s属于<image>数据类型，所以只能在可以使用<image>的地方使用。出于这个原因，repeating-radial-gradient()不会对background-color使用该<color>数据类型的其他属性起作用。

语法

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

/* An elliptical gradient near the top left of its container,
   starting red, changing to green and back again,
   repeating five times between the center and the bottom right corner,
   and only once between the center and the top left corner */
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);

参数

position
渐变的位置，解释方式与background-position或相同transform-origin。如果未指定，则默认为center。

shape
渐变的形状。该值可以是circle（意味着渐变的形状是具有恒定半径的圆）或ellipse（意味着形状是轴对齐的椭圆）。如果未指定，则默认为ellipse。

extent-keyword
描述结束形状必须有多大的关键字。可能的值为：

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

例子：

黑白渐变

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

最远的角落

.radial-gradient {
  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
      red, black 5%, blue 5%, green 10%);
  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
      red 0 5%, green 5% 10%);
}

椭圆渐变将从左上角 20% 居中，并在中心和最远角（右下角）之间重复 10 次。支持多位置色标的浏览器将显示红色和绿色条纹椭圆。尚不支持该语法的浏览器将看到从红色到黑色，然后从蓝色到绿色的渐变。