Как сделать border градиентом в css

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

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

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

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

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

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

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

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

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

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

конический градиент против радиального

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

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

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

Градиентные рамки в CSS

Градиентные рамки в CSS

От автора: допустим, вам нужна градиентная рамка CSS вокруг элемента. Я представляю себе это так: для этого не существует простого очевидного CSS API; я просто создам элемент-оболочку с linear-gradient фоном, а затем внутренний элемент перекроет большую часть этого фона, за исключением тонкой линии вокруг него.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

Всем привет! Вот к примеру для для фона градиента надо писать:

А как задать градиент к примеру для border-left: ?

Функции градиента работают как изображения, поэтому их надо применять там, где требуется подставить изображения. Для рамки это будет border-image , как-то так:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками стиль или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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