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