Funkcia repeating-radial-gradient

Funkcia repeating-radial-gradient nastavuje opakujúci sa radiálny gradient. To znamená, že nastavíme určitý vzor gradientu, napríklad od 0px do 10px - gradient od červenej k modrej a tento gradient sa bude opakovať na celý blok: 0px do 10px, od 10px do 20px, od 20px do 30px a tak ďalej.

Funkcia pracuje s rovnakými parametrami ako radial-gradient, rozdiel je len v efekte opakovania. Akceptované parametre nájdete v popise radial-gradient.

Syntax

selektor {
	background: repeating-radial-gradient([tvar typ pozícia], farba1 veľkosť1, farba2 veľkosť2...);
}

Príklad

Sústreďné kruhy:

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

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

Príklad

Sústreďné elipsy:

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

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

Príklad

Umiestnime sústreďné kruhy nie do stredu, ale na okraj:

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

Pozri tiež

funkciu repeating-linear-gradient,
ktorá vytvára opakujúci sa lineárny gradient
funkciu linear-gradient,
ktorá vytvára lineárny gradient
funkciu radial-gradient,
ktorá vytvára radiálny gradient