Градиент и изображения-границы на чистом CSS

Development | Amber | Комментировать запись

Если вы уже работали с CSS, вы наверняка использовали границы. Для этого в CSS есть свойство border, которое позволяет определить стиль, цвет и ширину границы (border-style, border-color, и border-width соответственно). Современные веб-браузеры поддерживают градиентные границы, а также позволяют использовать в качестве границ другие изображения.

В этом мануале мы изучим свойства border-image-source и border-image-slice.

Требования

• Базовое знакомство с CSS. Если вам нужно освежить свои знания, обратитесь к этой серии мануалов.
• Современный веб-браузер, поддерживающий border-image, linear-gradient, radial-gradient, и conic-gradient.

Настройка тестового класса

Прежде всего мы рассмотрим класс box, который определяет размеры поля и центрирует контент:

.box {
width: 400px;
height: 200px;
max-width: 100%;
margin: 1rem auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}

Давайте используем этот класс в элементе div:

<div class="box">
Example box without a border.
</div>

Теперь можно создать новый класс with-border:

.with-border {
border-color: black;
border-style: solid;
border-width: 30px;
}

Затем добавьте его в разметку:

<div class="box with-border">
Example box with a border.
</div>

Этот код отобразит на экране следующее:

Далее на этом примере мы попробуем добавить изображение, которое будет использовано в качестве границы.

Изображение в качестве границы

Сначала создайте новый класс with-border-image:

.with-border-image {
border-style: solid;
border-width: 20px;
border-image-source: url(/url/to/some/fancy/image.jpg);
border-image-slice: 60 30;
}

Обратите внимание: к элементу по-прежнему должна быть применена обычная граница, потому что изображение встанет на ее место.

Свойство border-image-source указывает исходное изображение, которое нужно применить. Это может быть URL-адрес растрового или векторного изображения (SVG) или URI.

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

Затем добавьте класс в разметку:

<div class="box with-border-image">
Example box with a border image.
</div>

Этот код отобразится так:

Собирательное свойство

Также существует собирательное свойство, которое позволяет одновременно указать значения для border-image-source и border-image-slice: это свойство border-image.

Вспомните, как в предыдущем примере свойства использовались по отдельности:

.with-border-image {
border-style: solid;
border-width: 20px;
border-image-source: url(/url/to/some/fancy/image.jpg);
border-image-slice: 60 30;
}

Это тот же класс, но тут мы используем собирательное свойство:

.with-border-image {
border-style: solid;
border-width: 20px;
border-image: url(/url/to/some/fancy/image.jpg) 60 30;
}

Эти определения одинаковы.

Градиентные границы

CSS поддерживает три типа градиентов: линейный, радиальный и конический. Для добавления градиентов нужно указать значение 1 для свойства border-image-slice.

Линейный градиент

Вот как определить линейный градиент:

.with-linear-gradient {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;

Добавьте это в свою разметку. Этот код отобразит следующее:

Теперь у вас есть элемент, использующий linear-gradient.

Радиальный градиент

Вот так можно добавить радиальный градиент:

.with-radial-gradient {
border-style: solid;
border-width: 10px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}

Конический градиент

Вот пример конического градиента:

.with-conic-gradient {
border-style: solid;
border-width: 10px;
border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
}

Если вы добавите этот код в свою разметку, вы получите следующее:

Теперь вы знаете, как создавать градиентные границы.

Заключение

В этой статье вы изучили свойства border-image-source и border-image-slice.

Еще с 2020 года 99% браузеров по всему миру поддерживают свойство border-image. Однако при внедрении новых функций следует всегда принимать во внимание, каким браузером пользуется ваша целевая аудитория.

К сожалению, border-image еще не работает должным образом с border-radius. Если вы хотите, чтобы ваш элемент имел скругленные градиентные границы, вас могут заинтересовать эти подходы, основанные на вложенных элементах с background-image и background-color.