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

Результат:

Смотрите также