От автора: допустим, вам нужна градиентная рамка CSS вокруг элемента. Я представляю себе это так: для этого не существует простого очевидного CSS API; я просто создам элемент-оболочку с linear-gradient фоном, а затем внутренний элемент перекроет большую часть этого фона, за исключением тонкой линии вокруг него.
Возможно, так:
Если вам не нравится идея элемента-оболочки, вы можете использовать псевдо-элемент, если отрицательное значение z-индекса в порядке (этого не сработает, если у вас будет много вложений в родительский элементов с их собственным фоном). Вот пример Стивена Шоу, в котором рассматривается border-radius:
Вы можете даже разместить отдельные стороны как тонки прямоугольники с псевдо-элементами, если вам не нужны все четыре стороны.
Но не стоит забывать о border-image, пожалуй, самом бестолковомсвойстве CSS всех времен. Вы можете использовать его, чтобы получить градиентные границы даже на отдельных сторонах:
Использование как border-image, так и border-image-slice, вероятно, является самым простым синтаксисом для создания градиентной границы, только, к сожалению, они несовместимы с border-radius:
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.