Функция linear-gradient()
Описание
Функция добавляет линейный градиент к фону элемента. Она выступает значением свойства background-image или background.
Синтаксис
background-image: linear-gradient(угол | to позиция, цвет);
Значение | Описание |
угол | Задаёт угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg. Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. |
цвет | Представляет собой значение цвета, за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах. |
позиция | Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left. В табл. приведены разные позиции и тип получаемого градиента для цветов #fff и #000, по другому от белого к чёрному. |
Позиция | Угол | Описание | Вид |
to top | 0deg | Снизу вверх. | |
to left | 270deg -90deg | Справа налево. | |
to bottom | 180deg | Сверху вниз. | |
to right | 90deg -270deg | Слева направо. | |
to top left | От правого нижнего угла к левому верхнему. | ||
to top right | От левого нижнего угла к правому верхнему. | ||
to bottom left | От правого верхнего угла к левому нижнему. | ||
to bottom right | От левого верхнего угла к правому нижнему. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#test {
width: 200px;
height: 100px;
background: linear-gradient(45deg, red, blue, violet);
}
</style>
<div id='test'></div>
</body>
</html>
Читайте также
Свойство border-style
Устанавливает стиль границы элемента.
Свойство max-height
Устанавливает максимальную высоту элемента.<br><br>Значение высоты элемента будет выч...
Свойство vertical-align
Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки табл...
Свойство animation-direction
Устанавливает направление движения анимации.
Свойство border-top
Позволяет одновременно установить толщину, стиль и цвет верхней границы элемента.<br>Значен...