Funkcija repeating-radial-gradient

Funkcija repeating-radial-gradient nustato kartojamą radialinį gradientą. Tai reiškia, kad mes nustatome tam tikrą gradiento raštą, pavyzdžiui, nuo 0px iki 10px - gradientas nuo raudonos iki žydros spalvos ir šis gradientas bus kartojamas per visą bloką: 0px iki 10px, nuo 10px iki 20px, nuo 20px iki 30px ir taip toliau.

Funkcija dirba su tais pačiais parametrais, kaip ir radial-gradient, skirtumas tik kartojimo efekte. Priimamus parametrus žiūrėkite radial-gradient apraše.

Sintaksė

selektorius {
	background: repeating-radial-gradient([forma tipas pozicija], spalva1 dydis1, spalva2 dydis2...);
}

Pavyzdys

Koncentriniai apskritimai:

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

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

Pavyzdys

Koncentriniai elipsės:

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

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

Pavyzdys

Koncentrinius apskritimus pastatysime ne centre, o iš šono:

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

Taip pat žiūrėkite

funkciją repeating-linear-gradient,
kuri sukuria kartojamą linijinį gradientą
funkciją linear-gradient,
kuri sukuria linijinį gradientą
funkciją radial-gradient,
kuri sukuria radialinį gradientą