Функција repeating-radial-gradient

Функција repeating-radial-gradient дефинише понављајући радијални градијент. То значи да дефинишемо одређени шаблон градијента, на пример, од 0px до 10px - градијент од црвене до плаве боје и овај градијент ће се понављати преко целог блока: 0px до 10px, од 10px до 20px, од 20px до 30px и тако даље.

Функција ради са истим параметрима као и radial-gradient, разлика је само у ефекту понављања. Параметре које прихвата погледајте у опису radial-gradient.

Синтакса

cssселектор {
  background: repeating-radial-gradient([форма тип позиција], боја1 величина1, боја2 величина2...);
}

Пример

Концентрични кругови:

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

Результат:

Пример

Концентрични елипси:

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

Результат:

Пример

Поставимо концентричне кругове не у центар, већ на ивицу:

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

Результат:

Погледајте такође