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

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (1 оценок, среднее: 5,00 из 5)
Загрузка...

Допустим, мы хотим сделать градиентную рамку вокруг элемента. Наиболее очевидный ответ:

  • В CSS нет простых способов это сделать.
  • Можно сделать элемент-обертку с фоном linear-gradient, а затем внутренний элемент закроет большую часть этого фона, за исключением тонкой линии вокруг него.

Примерно так:

See the Pen Gradient with Wrapper by Chris Coyier (@chriscoyier) on CodePen.

Если вам не нравится идея лишнего внешнего элемента, можно использовать псевдоэлемент вместе с отрицательным значением z-индекса,

Еще один пример с border-radius:

See the Pen Gradient border + border-radius by Shaw (@shshaw) on CodePen.

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

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

See the Pen Gradient Border on 2 sides with border-image by Chris Coyier (@chriscoyier) on CodePen.

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

See the Pen CSS Gradient Borders by Chris Coyier (@chriscoyier) on CodePen.

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

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

Scroll to top