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

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

Приветствую вас, дорогие друзья!

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

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

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

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

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

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

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 gradient в CSS

  1. 1 В скобках мы можем задать не обязательно 2 цвета, их может быть больше. Для этого просто указываем значения цветов через запятую:
    border-image: linear-gradient(to bottom right, #DC2903 , #F4F955, #0625F9);
  2. 2 Можно регулировать соотношение цветов в процентах задав число % рядом с цветом:
    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%);
  3. 3 Данное CSS на работает в паре со свойством border-radius, отвечающее за скругление углов.

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

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

Параметры border gradient css

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

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

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

Пример

Чтобы задать градиент для рамки по диагонали используем следующий код:

Пример

Так же направление градиента можно задавать в градусах:

border-image: linear-gradient(30deg, #0E9ADF, #F4F955 , #0625F9 );

Эффекты при наведении с использованием border gradient

Для создания эффекта на основе градиента зададим начальное значение градиента:

А затем при помощи псевдокласса :hover мы можем изменить цвет border gradient или соотношение цветов или его направление или всё вместе.

Пример

Надеюсь что моя статья помогла вам разобраться с заданием border gradient. Буду благодарна вам за ваши комментарии и репосты в соцсетях.

Успехов вам и вашим проектам!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

4 комментария

  1. Что-то ни один пример не открывается //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif

    • Примеры не должны открываться. На них показано как выглядит градиент рамки.

  2. Мне ваш сайт всё больше нравится.

    • Спасибо, Сергей! Очень приятно :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif