Градиентная обводка блока на CSS

Создание современных сайтов сопровождается использованием анимаций, как для отдельных элементов дизайна, так и целых блоков. Сегодня мы рассмотрим как сделать красивую градиентную обводку блока на одном только CSS?
Рассмотрим пару вариантов градиентных обводок.
1. Прямоугольная обводка с острыми углами
Cделаем следующее:
1. Создадим div.linear-gradient с градиентным фоном;
2. Создадим внутренний блок div с небольшим отступом.
Разметка HTML
<<div class="module-border-wrap">
<div class="module">
Современные технологии достигли такого уровня,
что сплоченность команды профессионалов прекрасно подходит для реализации вывода текущих активов.
Кстати, предприниматели в сети интернет объединены в целые кластеры себе подобных.
</div>
</div>
Стили CSS
.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;
}
Результат
2. Прямоугольная обводка с закругленными углами на псевдоэлементах ::before и ::after
Разметка HTML
<div class="gradient-box">
<p>
Современные технологии достигли такого уровня, что сплоченность команды профессионалов
прекрасно подходит для реализации вывода текущих активов. Кстати, предприниматели в сети
интернет объединены в целые кластеры себе подобных.
</p>
</div>
Стили CSS
.gradient-box { display: flex; align-items: center; width: 90%; margin: auto; max-width: 22em; position: relative; padding: 3em; box-sizing: border-box; color: #FFF; background: #000; background-clip: padding-box; /* !important */ border: solid 5px transparent; /* !important */ border-radius: 1em; }
.gradient-box:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); }
.gradient-box:after { content: ''; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); background: #000; }
p { z-index:10; }
Результат
Сложно сказать, почему активно развивающиеся страны третьего мира и по сей день остаются уделом либералов, которые жаждут быть обнародованы. Учитывая ключевые сценарии поведения, реализация намеченных плановых заданий не оставляет шанса для направлений прогрессивного развития. В рамках спецификации современных стандартов, непосредственные участники технического прогресса ограничены исключительно образом мышления.