Допустим, вам нужна градиентная рамка вокруг элемента. Я думаю так:
- Для этого не существует простого очевидного CSS API.
- Я просто сделаю элемент-оболочку с фоном линейного градиента, тогда внутренний элемент будет блокировать большую часть этого фона, кроме тонкой линии заполнения вокруг него.
Возможно так:
Если вам не нравится идея обертывающего элемента, вы можете использовать псевдоэлемент, если отрицательное значение z-index в порядке (этого не было бы, если бы было много вложений с родительскими элементами с их собственным фоном) .
Вот пример Стивена Шоу, решающего проблему border-radius в процессе:
Вы даже можете разместить отдельные стороны в виде узких прямоугольников псевдоэлементов, если вам не нужны все четыре стороны.
Но не забывайте полностью о border-image, пожалуй, самом тупом свойстве CSS всех времен. Вы можете использовать его для получения градиентных границ даже с отдельных сторон:
Использование как border-image, так и border-image-slice, вероятно, является самым простым синтаксисом для градиентной границы, к сожалению, он несовместим с border-radius.
Вот и всё! Удачи!
Ссылка на автора - twitter.com/chriscoyier !
