[Из песочницы] Градиентные границы в CSS

Доброго времени суток уважаемые хабровчане. Представляю вашему вниманию перевод статьи Криса Коера.

Допустим, вам нужна градиентная граница вокруг определенного элемента. И вы, такой, думаете:

Для этого не существует простого и очевидного CSS API.

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

Выглядеть это будет как-то так:

HTML

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.

SCSS

body { height: 100vh; margin: 0; display: grid; place-items: center; background: #222;}.module-border-wrap { max-width: 250px; padding: 1rem; position: relative; background: linear-gradient(to right, red, purple); padding: 3px;}.module { background: #222; color: white; padding: 2rem;}

результат

Читать дальше →

Источник: Уроки CSS на Хабрахабре