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



Допустим, вам нужна градиентная рамка вокруг элемента. Я думаю так:

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

Возможно так:


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

Вот пример Стивена Шоу, решающего проблему border-radius в процессе:


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

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


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

Вот и всё! Удачи!

Ссылка на автора - twitter.com/chriscoyier !


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!