Radial-gradient(), CSS, WebReference

Функція radial-gradient() додає радіальний градієнт до фону елемента. Радіальні за своїм принципом схожі на лінійні градієнти, але один колір переходить в інший не вздовж прямої лінії, а немов кола по воді навколо крапки. На рис. 1 представлено для порівняння одночасно два різні градієнти: радіальний (рис. 1а) і лінійний (рис. 1б).


а	б

Мал. 1. Радіальний та лінійний градієнт

Радіальний градієнт створюється за допомогою властивості background або background-image.

Позначення

Опис Приклад

Вказує тип значення.
A && B	Значення мають виводитися у вказаному порядку.	&&
A B	Вказує, що треба вибрати лише одне значення із запропонованих (A або B).	normal small-caps
A B	Кожне значення може використовуватись самостійно або спільно з іншими у довільному порядку.	width count
[]	Групує значення.	[crop cross]
*	Повторювати нуль або більше разів.	[, ]*
+	Повторювати один чи більше разів.	+
?	Зазначений тип, слово чи група не є обов'язковим.	inset?
	Повторювати щонайменше A, але з більше разів.
#	Повторювати один або більше разів через кому.	#

Задає початкову точку, звідки виходить градієнт. Позиція точки пишеться аналогічно значенням властивості background-position за допомогою ключових слів або доступних одиниць виміру на кшталт пікселів або відсотків; нижче наведено можливі поєднання.

top left = lefttop = 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 одиницях. Встановлює розмір градієнта. У табл. 1 перераховані можливі значення розміру з їх описом та результатом для білого та чорного кольору. Код та вид дано для кругового та еліптичного градієнта.Табл. 1. Ключові слова зміни розміру градієнтаЗначенняКодОписВид

closest-side

background: radial-gradient( circle closest-side at 30px 20px, #fff, #000);

background: radial-gradient( closest-side at 30px 20px, #fff, #000);

Градієнт збігається з найближчою стороною блоку (для кола) або одночасно збігається з найближчими горизонтальними і вертикальними сторонами (для еліпса).

closest-corner

background: radial-gradient( circle closest-corner at 30px 20px , #fff, #000);

background: radial-gradient( closest-corner at 30px 20px , #fff, #000);

Форма градієнта обчислюється на підставі інформації про відстань донайближчого кута блоку.

farthest-side

background: radial-gradient( circle farthest-side at 30px 20px , #fff, #000);

background: radial-gradient( farthest-side at 30px 20px , #fff, #000);

Схожий за своєю дією на closest-side, але градієнт поширюється на далеку сторону блоку.

farthest-corner

background: radial-gradient( circle farthest-corner at 30px 20px , #fff, #000);

background: radial-gradient( farthest-corner at 30px 20px , #fff, #000);

Форма градієнта обчислюється на підставі інформації про відстань до далекого кута блоку,

Результат цього прикладу показаний нижче.

Різкі переходи між різними кольорами

Результат цього прикладу показаний нижче.

Примітка

Chrome до версії 26, Safari до версії 6.1 та Andro -webkit-radial-gradient() .

Opera до версії 12.10 підтримує -o-radial-gradient().

Firefox підтримує до версії 16 -moz-radial-gradient() .

Усі властивості з префіксами не використовують ключове слово at під час завдання положення відправної точки градієнта.

Специфікація?

Специфікація Статус

CSS Image Values and Replaced Content Module Level 3

Можлива рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

11.10

12.10

5.1

6.1

3.6

2.1

4.4

6.1

У таблиці браузерів застосовуються такі позначення.

- Якість повністю підтримується браузером звсіма допустимими значеннями;
- властивість браузером не сприймається та ігнорується;
— під час роботи можлива поява різних помилок, або властивість підтримується лише частково, наприклад, в повному обсязі допустимі значення діють чи властивість застосовується не до всіх елементів, зазначених у специфікації.

Число вказує версію браузера, з якої властивість підтримується.