Funktionen repeating-radial-gradient

Funktionen repeating-radial-gradient angiver en gentagende radial gradient. Det betyder, at vi angiver et bestemt mønster for gradienten, for eksempel fra 0px til 10px - gradient fra rød til lyseblå, og denne gradient vil gentage sig over hele blokken: 0px til 10px, fra 10px til 20px, fra 20px til 30px og så videre.

Funktionen arbejder med de samme parametre som radial-gradient, forskellen er kun i gentagelseseffekten. Se de accepterede parametre i beskrivelsen af radial-gradient.

Syntaks

selektor {
	background: repeating-radial-gradient([form type position], farve1 størrelse1, farve2 størrelse2...);
}

Eksempel

Koncentriske cirkler:

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

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

Eksempel

Koncentriske ellipser:

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

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

Eksempel

Placer koncentriske cirkler ikke i centrum, men i kanten:

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

Se også

funktionen repeating-linear-gradient,
som skaber en gentagende lineær gradient
funktionen linear-gradient,
som skaber en lineær gradient
funktionen radial-gradient,
som skaber en radial gradient