Funkcija repeating-radial-gradient

Funkcija repeating-radial-gradient določa ponavljajoči se radialni gradient. To pomeni, da določimo določen vzorec gradienta, na primer, od 0px do 10px - gradient od rdeče do modre in ta gradient se bo ponavljal po celotnem bloku: 0px do 10px, od 10px do 20px, od 20px do 30px in tako naprej.

Funkcija deluje z enakimi parametri kot radial-gradient, razlika je le v učinku ponavljanja. Sprejete parametre glejte v opisu radial-gradient.

Sintaksa

selektor {
	background: repeating-radial-gradient([oblika tip pozicija], barva1 velikost1, barva2 velikost2...);
}

Primer

Koncentrični krogi:

<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 kroge ne na sredino, ampak na rob:

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

Glejte tudi

funkcijo repeating-linear-gradient,
ki ustvarja ponavljajoči se linearni gradient
funkcijo linear-gradient,
ki ustvarja linearni gradient
funkcijo radial-gradient,
ki ustvarja radialni gradient