CSS Радіальні градієнти
CSS Радіальні градієнти
Радіальний градієнт визначається його центром.
Щоб створити радіальный градієнт, ви також маєте визначити як мінімум дві точки (зупинки) кольору.
Синтаксис
background-image: radial-gradient(розмір фігури в позиції, початковий колір, ..., останній колір);
За замовчуванням форма - еліпс, розмір - найбільш дальній кут, а позиція - центр.
Радіальний градієнт - рівномірно розподілені кольорові точки (за замовчуванням)
В наступному прикладі показано радіальний градієнт з рівномірно розташованими обмежувачами кольору:
Радіальний градієнт - Кольорові точки з різним інтервалом
В наступному прикладі показано радіальний градієнт з різними інтервалами між кольоровими обмежувачами (зупинками):
Встановити форму
Параметр shape визначає форму. Може приймати значення кола або еліпсу. Значення за замовчуванням - еліпс.
В наступному прикладі показано радіальний градієнт у формі кола:
Використання ключових слів різного розміру
Параметр size визначає розмір градієнта. Може приймати чотири значення:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Приклад
Радіальний градієнт з ключовими словами різного розміру:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
Спробуйте самі »
Повторення радіального градієнта
Функція repeat-radial-gradient() використовується для повторення радіальних градієнтів:
Приклад
Радіальний градієнт, що повторюється:
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Спробуйте самі »
Перевірте себе за допомогою вправ!
CSS Властивості градієнта
В наступній таблиці перераховані властивості градієнта CSS:
| Властивості | Опис |
|---|---|
| background-image | Визначає одне або кілька фонових зображень для елемента |
