Функция 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;
}

Результат:

Вижте също