Как сделать бордер градиентом

Градиентные границы в CSS

Доброго времени суток уважаемые хабровчане. Представляю вашему вниманию перевод статьи Криса Коера.

Допустим, вам нужна градиентная граница вокруг определенного элемента. И вы, такой, думаете:

• Для этого не существует простого и очевидного CSS API.
• Я просто сделаю элемент-обертку с линейно-градиентным фоном, а затем внутренний элемент заблокирует большую часть этого фона, за исключением тонкой линии заполнения вокруг него.

Выглядеть это будет как-то так:

 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
 

body < height: 100vh; margin: 0; display: grid; place-items: center; background: #222; >.module-border-wrap < max-width: 250px; padding: 1rem; position: relative; background: linear-gradient(to right, red, purple); padding: 3px; >.module

Если вам не нравится идея оберточного элемента, вы можете использовать псевдоэлемент, до тех пор, пока отрицательное значение z-индекса в порядке (этого не произошло бы, если бы было много вложений родительских элементов с их собственными фонами).

Вот пример Стивена Шоу, закрепляющий border-radius :

 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est.
 

.gradient-box < display: flex; align-items: center; //width: 50vw; width: 90%; margin: auto; max-width: 22em; position: relative; padding: 30% 2em; box-sizing: border-box; $border: 5px; color: #FFF; background: #000; background-clip: padding-box; /* !importanté */ border: solid $border transparent; /* !importanté */ border-radius: 1em; &:before < content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: -$border; /* !importanté */ border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); >> html < height: 100%; background: #000; display: flex; >body

Но не забывайте полностью о border-image , возможно, самом бестолковом свойстве CSS всех времен. Вы можете использовать его, чтобы получить градиентные границы даже на отдельных сторонах:

 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
 

body < height: 100vh; margin: 0; display: grid; place-items: center; background: #222; >.module

Использование как border-image , так и border-image-slice , вероятно, является самым простым синтаксисом для создания градиентной границы, но, к сожалению, это просто несовместимо с border-radius .

 
 
 I have a gradient 
 
 I have a gradient 
 
 I have a gradient 
 
 I have a gradient 
 

button < background: none; text-decoration: inherit; font-family: system-ui; font-size: 1rem; padding: 1rem 2rem; >.border-gradient < border-image-slice: 1; border-width: 2px; >.border-gradient-purple < border-image: linear-gradient(to left, #743ad5, #d53a9d); >.border-gradient-green < border-image: linear-gradient(to left, #00C853, #B2FF59); >body < height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; >div < width: 100%; text-align: center; >> div > div < width: 100%; padding: 1rem; >> .on-dark < background: #222; button < color: white; >>

Как задать градиент для border в CSS?

Рассмотрим как задать в CSS border gradient, это позволит вам создать на своём сайте красивый эффект градиентной рамки. В одной из предыдущих статей я подробно рассматривала как задать градиент в качестве фона.

Так вот, CSS 3 позволяет нам это сделать не только для фона, но и для рамки.

Навигация по статье:

• Линейный градиент
• Особенности border gradient в CSS
• Направление градиента border gradient
• Эффекты при наведении с использованием border gradient

Линейный градиент

Для примера рассмотрим такой блок:

Чтобы задать ему размеры, отступы и так далее я допишу следующие CSS свойства:

.border-gradient1 < width : 80px ; /**ширина блока**/ padding : 20px 40px ; /**внутренние отступы**/ text-align : center ; /**выравнивание по центру**/ color : #000 ; /**цвет текста**/

Теперь нам нужно задать толщину рамки и её тип:

border: 10px solid transparent;

Для задания градиента допишем свойство border-image в css файле:

border-image: linear-gradient(#0B0E7F , #0B95DD);

Здесь мы в скобках задаём значения цветов, которые будут идти сверху вниз.
Чтобы наше CSS свойство работало во всех браузерах допишем кроссбраузерные префиксы:

-moz-border-image: -moz-linear-gradient(#0B0E7F , #0B95DD);
-webkit-border-image: -webkit-linear-gradient(#0B0E7F , #0B95DD);

И последнее зададим CSS свойство:

border-image-slice: 1;

Чтобы заданный градиент сместился или растянулся по всей границе.
В итоге весь CSS код задания border gradient будет выглядеть так:

.border-gradient1 < border : 10px solid transparent ; border-image : linear-gradient ( #0B0E7F , #0B95DD ) ; -moz-border-image : -moz-linear-gradient ( #0B0E7F , #0B95DD ) ; -webkit-border-image : -webkit-linear-gradient ( #0B0E7F , #0B95DD ) ; border-image-slice : 1 ;

Вот результат работы кода:

Особенности border gradient в CSS

1. 1 В скобках мы можем задать не обязательно 2 цвета, их может быть больше. Для этого просто указываем значения цветов через запятую:

border-image: linear-gradient(to bottom right, #DC2903 , #F4F955, #0625F9);

border-image: linear-gradient( #0E9ADF 0%, #F4F955 20%, #0625F9 100%);
-moz-border-image: -moz-linear-gradient(#0E9ADF 0%, #F4F955 20%, #0625F9 100%);
-webkit-border-image: -webkit-linear-gradient(#0E9ADF 0%, #F4F955 20%, #0625F9 100%);

Направление градиента border gradient

Чтобы наш градиент для рамки шел не сверху вниз, а например, слева направо или по диагонали мы можем задать для него направление при помощи дополнительных параметров.

При задании градиента с кроссбраузерными префиксами этот пример пишется немного иначе.

-moz-border-image: -moz-linear-gradient(left, #0B0E7F , #0B95DD);
-webkit-border-image: -webkit-linear-gradient(left, #0B0E7F , #0B95DD);

В первом случае мы писали в каком направлении должен распространяться градиент, а во втором – куда он должен идти.
Пример для border gradient слева направо:

CSS-border с анимированным градиентом

Здесь речь пойдёт о применении градиентной заливки для CSS-border и её анимации для перемещения цветов градиента вдоль границ блока.

Самый очевидный способ реализации рамки с градиентом – установить какой-либо тип CSS-градиента в качестве значения CSS-свойству border-image :

Выглядит хорошо. Можно ли теперь анимировать эту рамку, чтобы градиент перемещался по краю блока?

Чтобы анимировать градиентную заливку CSS-border, нужно с помощью настраиваемого свойства (CSS-переменной) добавить градиенту угол ( —angle ) поворота, а для анимации изменять его значение в @keyframes .

div < --angle: 0deg; /* … */ border-image: linear-gradient(var(--angle), green, yellow) 1; animation: 10s rotate linear infinite; >@keyframes rotate < to < --angle: 360deg; >>

Используя CSS-переменную, можно заставить браузер правильно автоматически изменять её значение от 0 до 360 градусов, вместо того, чтобы добавлять отдельные ключевые кадры для каждого увеличения на 1 градус. Чтобы это работало, нужно зарегистрировать настраиваемое свойство с помощью правила @property .

@property --angle < syntax: ''; initial-value: 0deg; inherits: false; >

Поскольку @property поддерживается только в Chromium, примеры ниже будут работать только в браузерах, основанных на нём. Для браузеров, которые его не поддерживают, можно добавить отдельные ключевые кадры для каждого шага, но здесь в примерах обойдёмся без усложнений.

Хотя эффект в этом примере уже выглядит довольно красиво, если использовать более двух цветов, будут заметны конвульсии в момент перехода градиентов через углы блока. Например, такая радужная градиентная рамка:

Лучше всего увидеть и понять, что там происходит, можно выключив заливку фона блока.

Чтобы исправить это и сделать движение плавным, сперва можно подумать об использовании радиального градиента, но на самом деле тут нужен конический градиент:

Таким образом, теперь каждый цвет градиента будет аккуратно и плавно переходить в рамку, а это приведёт к правильной плавной анимации.

Чтобы конец градиента красиво переходил в его начальный цвет, нужно в конце списка цветов повторить первый, здесь в примере это – red .

Если выключить заливку фона, то можно увидеть, что border-image растягивает каждый цвет градиента перпендикулярно своему краю, вместо обозначенного для градиента конуса. С помощью различных типов CSS-градиента, как отмечено выше, можно получить разные эффекты при перемещении цвета по границе контейнера.

Градиент и изображения-границы на чистом CSS

Если вы уже работали с CSS, вы наверняка использовали границы. Для этого в CSS есть свойство border, которое позволяет определить стиль, цвет и ширину границы (border-style, border-color, и border-width соответственно). Современные веб-браузеры поддерживают градиентные границы, а также позволяют использовать в качестве границ другие изображения.

Требования

• Базовое знакомство с CSS. Если вам нужно освежить свои знания, обратитесь к этой серии мануалов.
• Современный веб-браузер, поддерживающий border-image, linear-gradient, radial-gradient, и conic-gradient.

Настройка тестового класса

Прежде всего мы рассмотрим класс box, который определяет размеры поля и центрирует контент:

.box width: 400px;
height: 200px;
max-width: 100%;
margin: 1rem auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
>

Давайте используем этот класс в элементе div:

Теперь можно создать новый класс with-border:

.with-border border-color: black;
border-style: solid;
border-width: 30px;
>

Затем добавьте его в разметку:

Этот код отобразит на экране следующее:

Example box with a border.

Далее на этом примере мы попробуем добавить изображение, которое будет использовано в качестве границы.

Изображение в качестве границы

Сначала создайте новый класс with-border-image:

.with-border-image border-style: solid;
border-width: 20px;
border-image-source: url(/url/to/some/fancy/image.jpg);
border-image-slice: 60 30;
>

Обратите внимание: к элементу по-прежнему должна быть применена обычная граница, потому что изображение встанет на ее место.

Свойство border-image-source указывает исходное изображение, которое нужно применить. Это может быть URL-адрес растрового или векторного изображения (SVG) или URI.

border-image-slice определяет процесс нарезки изображения, который делит изображение на девять областей. Определяя до четырех значений, вы можете указать, какая часть изображения будет повторяться как часть границы.

Затем добавьте класс в разметку:

Этот код отобразится так:

Example box with a border.

Собирательное свойство

Также существует собирательное свойство, которое позволяет одновременно указать значения для border-image-source и border-image-slice: это свойство border-image.

Вспомните, как в предыдущем примере свойства использовались по отдельности:

.with-border-image border-style: solid;
border-width: 20px;
border-image-source: url(/url/to/some/fancy/image.jpg);
border-image-slice: 60 30;
>

Это тот же класс, но тут мы используем собирательное свойство:

.with-border-image border-style: solid;
border-width: 20px;
border-image: url(/url/to/some/fancy/image.jpg) 60 30;
>

Эти определения одинаковы.

Градиентные границы

CSS поддерживает три типа градиентов: линейный, радиальный и конический. Для добавления градиентов нужно указать значение 1 для свойства border-image-slice.

Линейный градиент

Вот как определить линейный градиент:

.with-linear-gradient border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;

Добавьте это в свою разметку. Этот код отобразит следующее:

Example box with a border.

Теперь у вас есть элемент, использующий linear-gradient.

Радиальный градиент

Вот так можно добавить радиальный градиент:

.with-radial-gradient border-style: solid;
border-width: 10px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
>

Конический градиент

Вот пример конического градиента:

.with-conic-gradient border-style: solid;
border-width: 10px;
border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
>

Если вы добавите этот код в свою разметку, вы получите следующее:

Example box with a border.

Теперь вы знаете, как создавать градиентные границы.

Заключение

В этой статье вы изучили свойства border-image-source и border-image-slice.

Еще с 2020 года 99% браузеров по всему миру поддерживают свойство border-image. Однако при внедрении новых функций следует всегда принимать во внимание, каким браузером пользуется ваша целевая аудитория.

К сожалению, border-image еще не работает должным образом с border-radius. Если вы хотите, чтобы ваш элемент имел скругленные градиентные границы, вас могут заинтересовать эти подходы, основанные на вложенных элементах с background-image и background-color.