repeating-radial-gradient-funktio

repeating-radial-gradient -funktio määrittää toistuvan radiaalisen gradientin. Tämä tarkoittaa, että määritämme tietyn gradientin kuosion, esimerkiksi välillä 0px - 10px - gradientin punaisesta sinertävään (cyan) ja tämä gradientti toistuu koko lohkon alueella: 0px - 10px, 10px - 20px, 20px - 30px ja niin edelleen.

Funktio toimii samoilla parametreilla kuin radial-gradient, ero on vain toistumisessa. Katso hyväksytyt parametrit radial-gradient:n kuvauksesta.

Syntaksi

valitsija {
	background: repeating-radial-gradient([muoto tyyppi sijainti], väri1 koko1, väri2 koko2...);
}

Esimerkki

Keskitetyt ympyrät:

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

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

Esimerkki

Keskitetyt ellipsit:

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

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

Esimerkki

Sijoitetaan keskitetyt ympyrät ei keskelle, vaan reunaan:

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

Katso myös

repeating-linear-gradient -funktio,
joka luo toistuvan lineaarisen gradientin
linear-gradient -funktio,
joka luo lineaarisen gradientin
radial-gradient -funktio,
joka luo radiaalisen gradientin