Funkcija repeating-radial-gradient

Funkcija repeating-radial-gradient zadaje ponavljajući radijalni gradijent. To znači da zadajemo određeni uzorak gradijenta, na primer, od 0px do 10px - gradijent od crvene do plave boje i ovaj gradijent će se ponavljati na celom bloku: 0px do 10px, od 10px do 20px, od 20px do 30px i tako dalje.

Funkcija radi sa istim parametrima kao i radial-gradient, razlika je samo u efektu ponavljanja. Parametre koje prima pogledajte u opisu radial-gradient.

Sintaksa

cssselektor {
  background: repeating-radial-gradient([forma tip pozicija], boja1 veličina1, boja2 veličina2...);
}

Primer

Koncentrični krugovi:

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 krugove ne u centar, već sa strane:

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

Результат:

Pogledajte takođe