Functie repeating-radial-gradient

De functie repeating-radial-gradient definieert een herhalend radiaal verloop. Dit betekent dat we een bepaald patroon van het verloop instellen, bijvoorbeeld van 0px tot 10px - een verloop van rood naar cyaan en dit verloop wordt herhaald over het hele blok: 0px tot 10px, van 10px tot 20px, van 20px tot 30px en zo verder.

De functie werkt met dezelfde parameters als radial-gradient, het enige verschil is het herhalingseffect. Voor de parameters die worden geaccepteerd, zie de beschrijving van radial-gradient.

Syntaxis

selector {
	background: repeating-radial-gradient([vorm type positie], kleur1 grootte1, kleur2 grootte2...);
}

Voorbeeld

Concentrische cirkels:

<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

Concentrische ellipsen:

<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

Laten we de concentrische cirkels niet in het midden plaatsen, maar aan de zijkant:

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

Zie ook

de functie repeating-linear-gradient,
die een herhalend lineair verloop creëert
de functie linear-gradient,
die een lineair verloop creëert
de functie radial-gradient,
die een radiaal verloop creëert