[Из песочницы] Градиентные границы в 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;}
результат
Читать дальше →
Источник:
0 Комментарии