Функция repeating-radial-gradient

La función repeating-radial-gradient define un gradiente radial repetitivo. Esto significa que establecemos un patrón específico de gradiente, por ejemplo, desde 0px hasta 10px - gradiente de rojo a cian y este gradiente se repetirá en todo el bloque: 0px a 10px, desde 10px hasta 20px, desde 20px hasta 30px y así sucesivamente.

La función trabaja con los mismos parámetros que radial-gradient, la única diferencia está en el efecto de repetición. Consulte los parámetros aceptados en la descripción de radial-gradient.

Sintaxis

cssselector {
  background: repeating-radial-gradient([forma tipo posición], color1 tamaño1, color2 tamaño2...);
}

Ejemplo

Círculos concéntricos:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Ejemplo

Elipses concéntricas:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
  width: 400px;
  height: 200px;
}

Результат:

Ejemplo

Coloquemos los círculos concéntricos no en el centro, sino en el borde:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Véase también