Fonction repeating-radial-gradient

La fonction repeating-radial-gradient définit un dégradé radial répétitif. Cela signifie que nous définissons un motif de dégradé spécifique, par exemple, de 0px à 10px - un dégradé du rouge au bleu ciel et ce dégradé se répétera sur tout le bloc : de 0px à 10px, de 10px à 20px, de 20px à 30px et ainsi de suite.

La fonction utilise les mêmes paramètres que radial-gradient, la seule différence est l'effet de répétition. Reportez-vous à la description de radial-gradient pour les paramètres acceptés.

Syntaxe

sélecteur {
	background: repeating-radial-gradient([forme type position], couleur1 taille1, couleur2 taille2...);
}

Exemple

Cercles concentriques :

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

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

Exemple

Ellipses concentriques :

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

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

Exemple

Plaçons les cercles concentriques non pas au centre, mais sur le côté :

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

Voir aussi

la fonction repeating-linear-gradient,
qui crée un dégradé linéaire répétitif
la fonction linear-gradient,
qui crée un dégradé linéaire
la fonction radial-gradient,
qui crée un dégradé radial