Funkcia repeating-radial-gradient

Funkcia repeating-radial-gradient nastavuje opakujúci sa radiálny gradient. To znamená, že nastavíme určitý vzor gradientu, napríklad od 0px do 10px - gradient od červenej k modrej a tento gradient sa bude opakovať na celý blok: 0px do 10px, od 10px do 20px, od 20px do 30px a tak ďalej.

Funkcia pracuje s rovnakými parametrami ako radial-gradient, rozdiel je len v efekte opakovania. Akceptované parametre nájdete v popise radial-gradient.

Syntax

cssselektor {
  background: repeating-radial-gradient([tvar typ pozícia], farba1 veľkosť1, farba2 veľkosť2...);
}

Príklad

Sústreďné kruhy:

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

Результат:

Príklad

Sústreďné elipsy:

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

Результат:

Príklad

Umiestnime sústreďné kruhy nie do stredu, ale na okraj:

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

Результат:

Pozri tiež