Funkcija repeating-radial-gradient

Funkcija repeating-radial-gradient določa ponavljajoči se radialni gradient. To pomeni, da določimo določen vzorec gradienta, na primer, od 0px do 10px - gradient od rdeče do modre in ta gradient se bo ponavljal po celotnem bloku: 0px do 10px, od 10px do 20px, od 20px do 30px in tako naprej.

Funkcija deluje z enakimi parametri kot radial-gradient, razlika je le v učinku ponavljanja. Sprejete parametre glejte v opisu radial-gradient.

Sintaksa

cssselektor {
  background: repeating-radial-gradient([oblika tip pozicija], barva1 velikost1, barva2 velikost2...);
}

Primer

Koncentrični krogi:

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

Результат:

Primer

Koncentrični elipsi:

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

Результат:

Primer

Postavimo koncentrične kroge ne na sredino, ampak na rob:

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

Результат:

Glejte tudi