Funkcija repeating-radial-gradient

Funkcija repeating-radial-gradient zadaje ponavljajući radijalni gradijent. To znači da zadajemo određeni uzorak gradijenta, na primer, od 0px do 10px - gradijent od crvene do plave boje i ovaj gradijent će se ponavljati na celom bloku: 0px do 10px, od 10px do 20px, od 20px do 30px i tako dalje.

Funkcija radi sa istim parametrima kao i radial-gradient, razlika je samo u efektu ponavljanja. Parametre koje prima pogledajte u opisu radial-gradient.

Sintaksa

selektor {
	background: repeating-radial-gradient([forma tip pozicija], boja1 veličina1, boja2 veličina2...);
}

Primer

Koncentrični krugovi:

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

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

Primer

Koncentrični elipsi:

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

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

Primer

Postavimo koncentrične krugove ne u centar, već sa strane:

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

Pogledajte takođe

funkciju repeating-linear-gradient,
koja kreira ponavljajući linearni gradijent
funkciju linear-gradient,
koja kreira linearni gradijent
funkciju radial-gradient,
koja kreira radijalni gradijent