Функция repeating-radial-gradient()
Описание
По своему действию похож на радиальный градиент, который делается функцией radial-gradient(), и имеет с ним схожий синтаксис. Но цвета градиента бесконечно повторяются во всех направлениях образуя узор, заполняющий фон элемента.
Синтаксис
background-image: repeating-radial-gradient([ circle || радиус ] [ at позиция ] , | [ ellipse || [радиус | проценты ]{2}] [ at позиция ] , | [ [ circle | ellipse ] || размер ] [ at позиция ] , | at позиция , цвет [ , цвет ]*);Дополнительно
| Значение | Описание |
| circle | Повторяющийся радиальный градиент круглой формы. |
| ellipse | Создаёт градиент эллиптической формы. Эта форма установлена по умолчанию. |
| радиус | Радиус градиента в доступных для CSS единицах. Одно значение указывает радиус круга, два значения — радиус эллипса по оси x и его же радиус по оси y. Если радиус явно не указан, градиент будет заполнять собой весь фон элемента. |
| позиция | Задаёт начальную точку откуда исходит градиент. Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселей или процентов; ниже приведены возможные сочетания. top left = left top = 0% 0% (в левом верхнем углу); top = top center = center top = 50% 0% (по центру вверху); right top = top right = 100% 0% (в правом верхнем углу); left = left center = center left = 0% 50% (по левому краю и по центру); center = center center = 50% 50% (по центру) — это значение по умолчанию; right = right center = center right = 100% 50% (по правому краю и по центру); bottom left = left bottom = 0% 100% (в левом нижнем углу); bottom = bottom center = center bottom = 50% 100% (по центру внизу); bottom right = right bottom = 100% 100% (в правом нижнем углу). |
| цвет | Представляет собой значение цвета, за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах. |
| размер | Устанавливает размер градиента. В табл. перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента. |
| Значение | Код | Описание | Вид |
| closest-side | background: repeating-radial-gradient(circle closest-side at 30px 20px, #fff, #000); background: repeating-radial-gradient(closest-side at 30px 20px, #fff, #000); | Градиент совпадает с ближайшей к нему стороной блока (для круга) или одновременно совпадает с ближайшими горизонтальными и вертикальными сторонами (для эллипса). |  |
| closest-corner | background: repeating-radial-gradient(circle closest-corner at 30px 20px, #fff, #000); background: repeating-radial-gradient(closest-corner at 30px 20px, #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока. |  |
| farthest-side | background: repeating-radial-gradient(circle farthest-side at 30px 20px, #fff, #000); background: repeating-radial-gradient(farthest-side at 30px 20px, #fff, #000); | Похож по своему действию на closest-side, но градиент распространяется до дальней стороны блока. |  |
| farthest-corner | background: repeating-radial-gradient(circle farthest-corner at 30px 20px, #fff, #000); background: repeating-radial-gradient(farthest-corner at 30px 20px, #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока. |  |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#test {
width: 200px;
height: 100px;
background-image: repeating-radial-gradient(circle at 200px 100px, #fff, #fff 25px, #fce3ee 25px, #fce3ee 50px);
}
</style>
<div id='test'></div>
</body>
</html>Читайте также
Свойство padding-inline-end
Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника по строчной оси....
Свойство top
Свойство top для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт...
Свойство filter
Применяет художественные эффекты к элементам. Обычно используется для изображений....
Стиль для переключателей в неопределённом состоянии
Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type='number' должно вводиться число, а не буквы, для ty...