A repeating-radial-gradient függvény

A repeating-radial-gradient függvény egy ismétlődő radiális átmenetet határoz meg. Ez azt jelenti, hogy meghatározunk egy adott átmeneti mintát, például 0px-tól 10px-ig - egy pirosról ciánkékre való átmenetet, és ez az átmenet ismétlődni fog a teljes blokkon: 0px-tól 10px-ig, 10px-től 20px-ig, 20px-től 30px-ig és így tovább.

A függvény ugyanazokkal a paraméterekkel működik, mint a radial-gradient, a különbség csak az ismétlődő hatásban van. Az elfogadott paramétereket lásd a radial-gradient leírásában.

Szintaxis

szelektor {
	background: repeating-radial-gradient([forma típus pozíció], szín1 méret1, szín2 méret2...);
}

Példa

Koncentrikus körök:

<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élda

Koncentrikus ellipszisek:

<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élda

Helyezzük a koncentrikus köröket nem a középpontba, hanem a szélére:

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

Lásd még

a repeating-linear-gradient függvényt,
amely egy ismétlődő lineáris átmenetet hoz létre
a linear-gradient függvényt,
amely egy lineáris átmenetet hoz létre
a radial-gradient függvényt,
amely egy radiális átmenetet hoz létre