Funktsioon repeating-radial-gradient

Funktsioon repeating-radial-gradient määrab korduva radiaalse gradendi. See tähendab, et me määrame kindla gradendi mustri, näiteks alates 0px kuni 10px - gradient punasest sinakasroheliseni ja see gradient kordub kogu ploki ulatuses: 0px kuni 10px, alates 10px kuni 20px, alates 20px kuni 30px ja nii edasi.

Funktsioon töötab samade parameetritega nagu radial-gradient, erinevus on ainult kordumise efekts. Võimalikke parameetreid vaadake radial-gradient kirjeldusest.

Süntaks

cssselektor {
  background: repeating-radial-gradient([kuju tüüp asukoht], värv1 suurus1, värv2 suurus2...);
}

Näide

Kontsentrilised ringid:

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

Результат:

Näide

Kontsentrilised ellipsid:

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

Результат:

Näide

Paigutame kontsentrilised ringid mitte keskele, vaid serva:

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

Результат:

Vaata ka