Funkce repeating-radial-gradient

Funkce repeating-radial-gradient nastavuje opakující se radiální přechod. To znamená, že nastavíme určitý vzor přechodu, například od 0px do 10px - přechod od červené k modré a tento přechod se bude opakovat v celém bloku: 0px do 10px, od 10px do 20px, od 20px do 30px a tak dále.

Funkce pracuje se stejnými parametry jako radial-gradient, rozdíl je pouze v efektu opakování. Přijímané parametry naleznete v popisu radial-gradient.

Syntaxe

selektor {
	background: repeating-radial-gradient([tvar typ pozice], barva1 velikost1, barva2 velikost2...);
}

Příklad

Soustředné 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;
}

Příklad

Soustředné 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;
}

Příklad

Umístíme soustředné kruhy ne do středu, ale k okraji:

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

Viz také

funkci repeating-linear-gradient,
která vytváří opakující se lineární přechod
funkci linear-gradient,
která vytváří lineární přechod
funkci radial-gradient,
která vytváří radiální přechod