Функция 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
,
которая создает радиальный градиент