Funksjonen repeating-radial-gradient

Funksjonen repeating-radial-gradient setter en repeterende radiell gradient. Dette betyr at vi setter et bestemt mønster for gradienten, for eksempel fra 0px til 10px - gradient fra rød til lyseblå, og denne gradienten vil repeteres over hele blokken: 0px til 10px, fra 10px til 20px, fra 20px til 30px og så videre.

Funksjonen arbeider med de samme parameterne som radial-gradient, forskjellen er bare i repetisjonseffekten. Se de aksepterte parameterne i beskrivelsen av radial-gradient.

Syntaks

velger {
	background: repeating-radial-gradient([form type posisjon], farge1 størrelse1, farge2 størrelse2...);
}

Eksempel

Konsentriske sirkler:

<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

Konsentriske 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

Plasserer de konsentriske sirkler ikke i sentrum, 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å

funksjonen repeating-linear-gradient,
som lager en repeterende lineær gradient
funksjonen linear-gradient,
som lager en lineær gradient
funksjonen radial-gradient,
som lager en radiell gradient