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

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

Esimerkki

Keskitetyt ympyrät:

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

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

Результат:

Esimerkki

Keskitetyt ellipsit:

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

css#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:

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

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

Результат:

Katso myös