Функция 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

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

Ejemplo

Círculos concéntricos:

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

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

Ejemplo

Elipses concéntricas:

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

#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:

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

#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

la función repeating-linear-gradient,
que crea un gradiente lineal repetitivo
la función linear-gradient,
que crea un gradiente lineal
la función radial-gradient,
que crea un gradiente radial