Funksie repeating-radial-gradient

Die funksie repeating-radial-gradient spesifiseer 'n herhalende radiale gradiënt. Dit beteken ons definieer 'n sekere patroon vir die gradiënt, byvoorbeeld, van 0px tot 10px - 'n gradiënt van rooi na blou en hierdie gradiënt sal oor die hele blok herhaal word: 0px tot 10px, van 10px tot 20px, van 20px tot 30px en so aan.

Die funksie werk met dieselfde parameters as radial-gradient, die verskil is slegs in die herhalingseffek. Raadpleeg die parameters wat aanvaar word in die beskrywing van radial-gradient.

Sintaksis

selektor {
	background: repeating-radial-gradient([vorm tipe posisie], kleur1 grootte1, kleur2 grootte2...);
}

Voorbeeld

Konsentriese sirkels:

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

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

Voorbeeld

Konsentriese ellipses:

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

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

Voorbeeld

Plaas die konsentriese sirkels nie in die middel nie, maar aan die kant:

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

Sien ook

die funksie repeating-linear-gradient,
wat 'n herhalende lineêre gradiënt skep
die funksie linear-gradient,
wat 'n lineêre gradiënt skep
die funksie radial-gradient,
wat 'n radiale gradiënt skep