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 | Устанавливает одно или несколько фоновых изображений для элемента |
