Funktsioon repeating-radial-gradient

Funktsioon repeating-radial-gradient määrab korduva radiaalse gradendi. See tähendab, et me määrame kindla gradendi mustri, näiteks alates 0px kuni 10px - gradient punasest sinakasroheliseni ja see gradient kordub kogu ploki ulatuses: 0px kuni 10px, alates 10px kuni 20px, alates 20px kuni 30px ja nii edasi.

Funktsioon töötab samade parameetritega nagu radial-gradient, erinevus on ainult kordumise efekts. Võimalikke parameetreid vaadake radial-gradient kirjeldusest.

Süntaks

selektor {
	background: repeating-radial-gradient([kuju tüüp asukoht], värv1 suurus1, värv2 suurus2...);
}

Näide

Kontsentrilised ringid:

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

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

Näide

Kontsentrilised ellipsid:

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

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

Näide

Paigutame kontsentrilised ringid mitte keskele, vaid serva:

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

Vaata ka

funktsiooni repeating-linear-gradient,
mis loob korduva lineaarse gradendi
funktsiooni linear-gradient,
mis loob lineaarse gradendi
funktsiooni radial-gradient,
mis loob radiaalse gradendi