Funcția repeating-radial-gradient

Funcția repeating-radial-gradient definește un gradient radial repetat. Aceasta înseamnă că definim un model specific de gradient, de exemplu, de la 0px până la 10px - gradient de la roșu la albastru deschis și acest gradient se va repeta pe întregul bloc: de la 0px până la 10px, de la 10px până la 20px, de la 20px până la 30px și așa mai departe.

Funcția lucrează cu aceiași parametri ca și radial-gradient, diferența fiind doar în efectul de repetare. Parametrii acceptați sunt prezentați în descrierea funcției radial-gradient.

Sintaxă

selector {
	background: repeating-radial-gradient([formă tip poziție], culoare1 dimensiune1, culoare2 dimensiune2...);
}

Exemplu

Cercuri concentrice:

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

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

Exemplu

Elipse concentrice:

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

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

Exemplu

Plasează cercurile concentrice nu în centru, ci la margine:

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

Vezi și

funcția repeating-linear-gradient,
care creează un gradient linear repetat
funcția linear-gradient,
care creează un gradient linear
funcția radial-gradient,
care creează un gradient radial