Funkcija repeating-radial-gradient

Funkcija repeating-radial-gradient nustato kartojamą radialinį gradientą. Tai reiškia, kad mes nustatome tam tikrą gradiento raštą, pavyzdžiui, nuo 0px iki 10px - gradientas nuo raudonos iki žydros spalvos ir šis gradientas bus kartojamas per visą bloką: 0px iki 10px, nuo 10px iki 20px, nuo 20px iki 30px ir taip toliau.

Funkcija dirba su tais pačiais parametrais, kaip ir radial-gradient, skirtumas tik kartojimo efekte. Priimamus parametrus žiūrėkite radial-gradient apraše.

Sintaksė

cssselektorius {
  background: repeating-radial-gradient([forma tipas pozicija], spalva1 dydis1, spalva2 dydis2...);
}

Pavyzdys

Koncentriniai apskritimai:

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

Результат:

Pavyzdys

Koncentriniai elipsės:

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

Результат:

Pavyzdys

Koncentrinius apskritimus pastatysime ne centre, o iš šono:

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

Результат:

Taip pat žiūrėkite