Свойство CSS border-image-width
Свойство CSS border-image-width определяет ширину изображения границы.
Свойство border-image-width является одним из свойств CSS3.
Оно может принимать от одного до четырёх значений — для верхней, правой, нижней и левой сторон.
Можно использовать одно, два, три или четыре значения. Если задано одно значение, оно применяется ко всем четырём сторонам. Если заданы два значения, первое применяется к верхней и нижней сторонам, второе — к левой и правой. Если заданы три значения, первое применяется к верхней стороне, второе — к левой и правой, третье — к нижней. Если заданы четыре значения, они применяются к верхней, правой, нижней и левой сторонам по часовой стрелке. Это означает, что если четвёртое значение опущено, оно равно второму. Если опущено третье значение, оно равно первому. Если опущено второе значение, оно равно первому.
| Исходное значение | 1 |
|---|---|
| Применяется к | Ко всем элементам, кроме внутренних элементов таблицы, когда border-collapse имеет значение collapse. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.borderImageWidth = "20px"; |
Синтаксис
Синтаксис свойства CSS border-image-width
border-image-width: number | % | auto | initial | inherit;Пример свойства border-image-width:
Пример использования свойства CSS border-image-width со значением px
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 20px;
border-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
border-image-slice: 20;
border-image-repeat: round;
border-image-width: 20px;
}
</style>
</head>
<body>
<h1>Border-image-width Example</h1>
<p class="border">Here the border-image-width is set to 20px.</p>
</body>
</html>Результат
Ниже приведён ещё один пример, демонстрирующий изменения при использовании одного, двух, трёх или четырёх значений.
Пример свойства border-image-width с разными значениями:
Пример использования свойства CSS border-image-width с двумя, тремя и четырьмя значениями
<!DOCTYPE html>
<html>
<head>
<style>
.border1 {
border: 10px solid transparent;
padding: 20px;
border-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px;
}
.border2 {
border: 10px solid transparent;
padding: 20px;
border-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px 10px;
}
.border3 {
border: 10px solid transparent;
padding: 40px;
border-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px 10px 40px;
}
.border4 {
border: 10px solid transparent;
padding: 55px;
border-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 10%;
border-image-repeat: round;
border-image-width: 20px 10px 40px 55px;
}
</style>
</head>
<body>
<h1>The border-image-width Example</h1>
<p class="border1">Here the border-image-width is set to 20px.</p>
<p class="border2">Here the border-image-width is set to 20px and 10px.</p>
<p class="border3">Here the border-image-width is set to 20px, 10px and 40px.</p>
<p class="border4">Here the border-image-width is set to 20px, 10px, 40px and 55px.</p>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| length | Единица длины (px), определяющая размер border-width. | Запустить » |
| number | Ширина границы задаётся как кратное соответствующему border-width. Не может быть отрицательным, значение по умолчанию — 1. | Запустить » |
| percentage | Вычисляется относительно ширины области изображения границы для горизонтальных смещений и высоты области изображения границы для вертикальных смещений. | Запустить » |
| auto | Ширина границы становится равной собственной ширине или высоте соответствующего border-image-slice. | Запустить » |
| initial | Устанавливает для свойства значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что делает свойство 'border-image-width' в CSS?