repeating-radial-gradient()
Оновлено: 16.01.2023
repeating-radial-gradient()
За своєю дією схожий на радіальний градієнт, який робиться функцією radial-gradient(), і має з ним схожий синтаксис. Але кольори градієнта нескінченно повторюються в усіх напрямках, утворюючи візерунок, що заповнює фон елемента.
Синтаксис
background-image: repeating-radial-gradient([ circle || <радіус> ] [ at <позиція> ]? ,
| [ ellipse || [<радіус> | <відсотки> ]{2}] [ ія> ,
<колір> [ , <колір> ]*)
Значення
| circle | Радіальний градієнт круглої форми. |
| ellipse | Створює градієнт еліптичної форми. Цю форму встановлено за замовчуванням |
| <радиус> | Радіус градієнта в доступних для CSS одиницях. Одне значення вказує радіус кола, два значення - радіус еліпса по осі x і його ж радіус по осі y. Якщо радіус явно не вказано, градієнт заповнюватиме собою все тло елемента. |
| <позиция> | Задає початкову точку звідки виходить градієнт. Позиція точки пишеться аналогічно до значень властивості background-position за допомогою ключових слів або доступних одиниць виміру на кшталт пікселів або відсотків; нижче наведено можливі поєднання. |
| <цвет> | Являє собою значення кольору (див. колір), за яким іде необов'язкова позиція кольору відносно осі градієнта, її задають у відсотках від 0% до 100% або в будь-яких інших придатних для CSS одиницях. |
| <размер> | Встановлює розмір градієнта. У табл. 1 перелічено можливі значення розміру з їхнім описом і результатом для білого та чорного кольору. Код і вигляд наведено для кругового та еліптичного градієнта. |
Приклад
Примітка
Chrome до версії 26, Safari до версії 6.1 і Android до версії 4.4 підтримують -webkit-repeating-radial-gradient().
Opera до версії 12.10 підтримує -o-repeating-radial-gradient().
Firefox до версії 16 підтримує -moz-repeating-radial-gradient().
Усі властивості з префіксами не використовують ключове слово at під час завдання положення відправної точки градієнта.