Funzione repeating-radial-gradient

La funzione repeating-radial-gradient imposta un gradiente radiale ripetuto. Ciò significa che definiamo un motivo specifico del gradiente, ad esempio, da 0px a 10px - gradiente dal rosso al ciano e questo gradiente si ripeterà per tutto il blocco: da 0px a 10px, da 10px a 20px, da 20px a 30px e così via.

La funzione lavora con gli stessi parametri di radial-gradient, la differenza è solo nell'effetto di ripetizione. I parametri accettati sono consultabili nella descrizione di radial-gradient.

Sintassi

selettore {
	background: repeating-radial-gradient([forma tipo posizione], colore1 dimensione1, colore2 dimensione2...);
}

Esempio

Cerchi concentrici:

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

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

Esempio

Ellissi concentriche:

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

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

Esempio

Posizioniamo i cerchi concentrici non al centro, ma sul lato:

<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;
}

Vedi anche

la funzione repeating-linear-gradient,
che crea un gradiente lineare ripetuto
la funzione linear-gradient,
che crea un gradiente lineare
la funzione radial-gradient,
che crea un gradiente radiale