Функция repeating-radial-gradient

Функция repeating-radial-gradient задает повторяющийся радиальный градиент. Это значит, что мы задаем определенный узор градиента, например, от 0px до 10px - градиент от красного к голубому и этот градиент будет повторяться на весь блок: 0px до 10px, от 10px до 20px, от 20px до 30px и так далее.

Функция работает с теми же параметрами, что и radial-gradient, отличие только в эффекте повторения. Принимаемые параметры смотрите в описании radial-gradient.

Синтаксис

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

Пример

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

<div id="elem"></div> #elem { background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px); width: 400px; height: 200px; }

:

Пример

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

<div id="elem"></div> #elem { background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px); width: 400px; height: 200px; }

:

Пример

Разместим концентрические круги не по центру, а с краю:

<div id="elem"></div> #elem { background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px); width: 400px; height: 200px; }

:

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

  • функцию repeating-linear-gradient,
    которая создает повторяющийся линейный градиент
  • функцию linear-gradient,
    которая создает линейный градиент
  • функцию radial-gradient,
    которая создает радиальный градиент