Funkce repeating-radial-gradient

Funkce repeating-radial-gradient nastavuje opakující se radiální přechod. To znamená, že nastavíme určitý vzor přechodu, například od 0px do 10px - přechod od červené k modré a tento přechod se bude opakovat v celém bloku: 0px do 10px, od 10px do 20px, od 20px do 30px a tak dále.

Funkce pracuje se stejnými parametry jako radial-gradient, rozdíl je pouze v efektu opakování. Přijímané parametry naleznete v popisu radial-gradient.

Syntaxe

cssselektor {
  background: repeating-radial-gradient([tvar typ pozice], barva1 velikost1, barva2 velikost2...);
}

Příklad

Soustředné 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;
}

Результат:

Příklad

Soustředné 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;
}

Результат:

Příklad

Umístíme soustředné kruhy ne do středu, ale k okraji:

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

Результат:

Viz také