CSS свойство border-image
Сокращенное свойство border-image дает возможность установить изображение как границу для элемента. Данное свойство устанавливается с помощью других свойств border-image. Если значение опущено, оно устанавливается в значение по умолчанию. Некоторые характеристики значений:
- border-image-source - Если установлено значение "none", или если изображение не отображается, будут использованы стили границ.
- border-image-slice - Если не установлено значение "fill", средняя часть изображения будет полностью прозрачна.
- border-image-width - Если значение этого свойства больше, чем border-width элемент, граница изображение расширится за пределы padding (и/или content). Данное свойство может использовать одно, две, три или четыре значения.
- border-image-outset -Можно использовать одно, две, три или четыре значения.
- border-image-repeat - Могут быть установлены две значения. Если второе значение опущено, будет то же самое, что и при первом значении. Когда устанавливаем только одно значение, оно применяется для всех сторон. При использовании двух значений, первое применяется для верхней и нижней стороны, а второе - для правой и левой.
border-image: source slice width outset repeat | initial | inherit;
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 10%;
}
</style>
</head>
<body>
<h2>Пример border-image-slice</h2>
<p class="border">border-image: 10% round;</p>
<p>Здесь использовано оригинальное изображение:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
</body>
</html>
Пример с разными значениями:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 30%;
border-image-repeat: repeat;
border-image-width: 15px;
}
.border2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 20%;
border-image-repeat: round;
border-image-width: 10px;
}
.border3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 15%;
border-image-repeat: space;
border-image-width: 20px;
}
</style>
</head>
<body>
<h2>Пример border-image со всеми значениями.</h2>
<p class="border">border-image: 30% 15px repeat</p>
<p class="border2">border-image: 20% 10px round;</p>
<p class="border3">border-image: 15% 20px space;</p>
<p>Here is the original image used:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
</body>
</html>
