Градиент в CSS означает плавный переход между двумя или более цветами. Раньше нам приходилось использовать предопределенные изображения для достижения эффектов градиента. CSS3 предоставляет гибкое решение для достижения эффектов градиента.
С помощью CSS3 вы можете определить три типа градиентов, а именно: линейные градиенты (создаваемые с помощью функции Linear-gradient()), радиальные градиенты (создаваемые с помощью функции Radial-gradient()) и конические градиенты (создаваемые с помощью функции conic-gradient()). функция создания). Кроме того, вы можете создавать повторяющиеся градиенты, используя функции повторяющегося линейного градиента(), повторяющегося радиального градиента() и повторяющегося конического градиента().
Градиенты, созданные с помощью CSS, не только просты и гибки, но также экономят время загрузки веб-страниц, устраняя процесс загрузки, необходимый при использовании изображений. Кроме того, элементы градиента, созданные с помощью CSS, можно масштабировать вверх или вниз в любом масштабе без потери качества.
1. Линейный градиент
Линейный градиент — это цветовой градиент вдоль прямой линии (например, сверху справа вниз, слева направо и т. д.). Чтобы создать линейный градиент, вам необходимо определить как минимум две точки цвета (точка цвета относится к). цвет, для которого требуется плавный переход), для создания более сложных эффектов градиента необходимо определить больше остановок цвета. Основной синтаксис для создания линейного градиента следующий:
линейный градиент (направление, цвет-стоп1, цвет-стоп2,...);
Описание параметра следующее:
Направление — это необязательное значение, определяющее направление градиента (например, слева направо, сверху вниз). Это может быть определенный угол (например, 90 градусов), или вы можете использовать ключевые слова, например, слева. , вправо, вверх, вниз и т. д., чтобы указать направление градиента. Например:
● налево: означает справа налево, что эквивалентно 270 градусам;
● вправо: означает слева направо, что эквивалентно 90 градусам;
● вверх: означает снизу вверх, что соответствует 0 градусам;
● вниз: значение по умолчанию, указывающее сверху вниз, что соответствует 180 градусам;
● вправо вниз: означает движение сверху слева направо вниз;
● вправо вверх: означает движение снизу слева направо вверх;
● влево вниз: означает движение сверху справа вниз влево;
● влево вверх: означает движение из правого нижнего угла в левый верхний.
color-stop1, color-stop2, ...: указывает несколько определенных цветовых шкал. Помимо определения цвета в каждой цветовой шкале, начальное и конечное положения цвета также можно определить путем добавления значения к единице измерения или значению. процент.
[Пример] Используйте функцию linear-gradient() для определения линейных градиентов:
<!DOCTYPEhtml><html><head><style>div{width:210px;height:50px;float:left;margin:10px;}.one{background:linear-gradient(torightbottom,red,blue70px);}. два {фон: линейный градиент (190 градусов, # 000, # FFF);}. три {фон: линейный градиент ient(red,green,blue);}.four{background:linear-gradient(toright,red,orange,yellow,green,blue,indigo,violet);</style></head><body><divclass =one></div><divclass=two></div><divclass=three></div><divclass=four></div></body></html>Результаты запуска:
2. Радиальный градиент радиальный-градиент() исходит из центральной точки;
Разница между радиальным градиентом и линейным типом градиента заключается в том, что радиальный градиент — это градиент, простирающийся наружу от центра. Вы можете указать положение центральной точки и задать форму градиента. Основной синтаксис определения радиального градиента следующий:
радиальный градиент (shapesizeatposition, color-stop1, color-stop2,...);
Описание параметра следующее:
(1) at: ключевое слово, которое необходимо разместить перед позицией параметра;
(2) Положение: укажите координаты начальной точки градиента. Вы можете указать координаты начальной точки градиента, используя значение плюс единицу измерения, процент или ключевое слово (например, слева, снизу и т. д.). ). Если указаны 2 параметра, то используется первый параметр. Представляет абсциссу, а второй параметр используется для представления ординаты. Если указан только один параметр, для второго параметра по умолчанию будет установлено значение 50%. центр;
(3) форма: укажите форму градиента. Необязательные значения: круг (круг) и эллипс (эллипс);
(4) Размер: укажите размер формы градиента. Помимо использования конкретных числовых значений для указания радиуса круга и эллипса, вы также можете использовать ключевые слова, показанные ниже, чтобы указать размер формы градиента:
●ближайшая сторона: укажите длину радиуса радиального градиента от центра круга до стороны, ближайшей к центру круга;
●ближайший угол: укажите длину радиуса радиального градиента от центра круга до угла, ближайшего к центру круга;
●farthest-side: значение по умолчанию, определяющее длину радиуса радиального градиента от центра круга к стороне, наиболее удаленной от центра круга;
●дальний угол: укажите длину радиуса радиального градиента от центра круга до самого дальнего угла от центра круга.
(5) color-stop1, color-stop2,...: указывает несколько определенных цветовых шкал. Помимо определения цвета в каждой цветовой шкале, начальное и конечное положения цвета также могут быть определены в виде числового значения. плюс единица или процент.
[Пример] Используйте функцию radius-gradient() для определения радиального градиента:
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{background:radial- градиент(circleat50%,красный,желтый,лайм);}.two{background:radial-gradient(ellipse100px30pxat30%,red,yellow,lime);}.three{background:r adial-gradient(circle100pxat50%,red10%,yellow50%,lime100px);}.four{background:radial-gradient(circleclosest-cornerat50px30px,red,y желтый, лайм);</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four>< /div></body></html>Результаты запуска:
3. Конический градиент conic-gradient() вращается вокруг центральной точки;
Конический градиент похож на радиальный градиент. Оба имеют центральную точку в качестве исходной точки цветовой шкалы. Разница в том, что конический градиент вращается вокруг центральной точки (а не исходит из центральной точки). определение конического градиента выглядит следующим образом:
конический градиент (fromangleatposition,start-color,...,last-color);
Синтаксис объясняется следующим образом:
(1) from: ключевое слово, которое необходимо разместить перед углом параметра;
(2) угол: определяет начальный угол градиента конуса, который может быть пустым, значение по умолчанию — 0 градусов;
(3) at: ключевое слово, которое необходимо разместить перед позицией параметра;
(4) Положение: определение координат центра конуса градиента. Вы можете указать координаты центра конуса, используя значение плюс единицу измерения, процент или ключевые слова (например, слева, снизу и т. д.). предоставляются, то первый параметр используется для представления абсциссы, а второй параметр используется для представления ординаты. Если указан только один параметр, для второго параметра по умолчанию будет установлено значение 50%, что соответствует центру;
(5) start-color, ..., Last-color: указывает несколько определенных цветовых шкал. Помимо определения цвета в каждой цветовой шкале, начальное положение цвета также может быть определено в процентах или угле.
[Пример] Используйте conic-gradient() для определения градиента конуса:
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{background:conic-gradient(at50%,red, оранжевый, желтый, зеленый, синий, индиго, фиолетовый, красный);}.two{backg круглый: конический градиент (red0deg30deg,оранжевый30deg50deg,желтый50deg200deg,green200deg300deg,blue300deg360de g);}.three{background:conic-gradient(from90deg,red0%55%,yellow55%90%,lime90%100%);}.four{/*Turns. Всего круг имеет 1 поворот 90deg=100grad=0.25turn≈1.570796326794897rad*/background:conic-gradient(#fff0.25turn,#0000.25turn0.5turn,#fff0.5turn0.75turn,# 0000.75turn);</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four></ div></body></html>Результаты запуска:
4. Повторяющийся градиент
В CSS вы также можете использовать такие функции, как повторяющийся линейный градиент(), повторяющийся радиальный градиент() и повторяющийся конический градиент(), чтобы создавать повторяющиеся градиенты линейных градиентов, радиальных градиентов и конических градиентов соответственно. так называемый «Повторяющийся градиент» означает многократное повторение процесса градиента для покрытия всего элемента.
Совет: Синтаксис функций повторяющегося линейного градиента(), повторяющегося радиального градиента() и повторяющегося конического градиента() аналогичен синтаксису функций линейного градиента(), радиального градиента(). и функции conic-gradient() соответственно.
[Пример] Используйте три функции повторяющихся линейных градиентов(), повторяющихся радиальных градиентов() и повторяющихся конических градиентов() для определения повторяющихся градиентов:
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{background:repeating-linear-gradien t(190deg,#0000px10px,#FFF10px20px);}.two{background:repeating-radial-gradient(circle100pxat50%,red0%10%,yellow10%30%,lime30%40%);}.three{background :repeating-conic-gradient(#69f036deg,#fd44ff36deg72deg);}.four{background:conic-gradient(#fff0.25turn,#0000.25turn0.5turn,#fff0.5turn0.75turn,#0000 .75turn)topleft/25%25%repeat;</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div> <divclass=four></div></body></html>Результаты запуска:
