Как сделать градиентную обводку для блока

Градиентная обводка позволяет добавить яркий акцент к элементам на странице. В Taptop это можно сделать двумя способами: через два Div-блока или с помощью свойства border-image.

Смотрите видео:

Способ 1: Два Div-блока

1. Создайте внешний Div-блок — обертку, которая будет рамкой. Задайте ему стили:

Фон с градиентом — линейным или радиальным, любые цвета по вашему вкусу.

Внутренние отступы (например, 10px) — они создадут пространство, через которое будет видна градиентная рамка.

2. Добавьте внутренний Div-блок с контентом.

При необходимости задайте скругление углов на обоих дивах — тогда рамка повторит форму блока.

Способ 2: Один Div-блок с border-image

Выберите элемент для стилизации.

Задайте ему обводку, например, 10px.

3. Добавьте пользовательское свойство border-image с градиентом:

border-image: linear-gradient(to right, #цвет1 0%, #цвет2 100%) 1

to right — задает направление градиента.

Единица (1) в конце нужна, чтобы градиент покрывал все стороны, а не только углы.

Плюс этого способа — подходит для блоков со сложным фоном, например, с изображениями. Минус — нельзя задать скругление углов.

Резюме

Первый способ универсален и дает полный контроль над формой рамки, а второй — проще и удобен для блоков со сложным фоном. Выбирайте подходящий метод в зависимости от задачи и дизайна.