Свойство CSS border-image-slice
Свойство border-image-slice определяет, как разбить изображение, указанное в border-image-source, на девять областей: четыре угла, четыре края и центральная часть. Центральная часть полностью прозрачна, пока не будет установлено значение "fill". Это одно из свойств CSS3.
Свойство border-image-slice имеет три значения: число, процент и fill. Число представляет смещение края в пикселях для растровых изображений и координаты для векторных изображений. Процент представляет смещение края в процентах от размера исходного изображения. Значение fill заставляет центральную часть изображения отображаться как фоновое изображение.
Это свойство может принимать до четырех значений. Отрицательные значения не допускаются. Если указано одно значение, оно устанавливает одинаковое расстояние срезов от соответствующих сторон. Если указаны два значения, первое создает срезы, отсчитываемые от верха и низа, а второе — от левого и правого краев. Если указано три значения, первое создает срезы от верха, второе — от левого и правого краев, третье — от низа. Если указаны четыре значения, они создают срезы от всех четырех сторон.
| Начальное значение | 100%. |
|---|---|
| Применяется ко | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.borderImageSlice = "10%"; |
Синтаксис
Синтаксис свойства CSS border-image-slice
border-image-slice: number | % | fill | initial | inherit;Пример свойства border-image-slice:
Пример использования свойства CSS border-image-slice со значением %(процент)
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
border-image-slice: 20%;
}
</style>
</head>
<body>
<h2>Border-image-slice example</h2>
<p class="border">Here the border-image-slice is set to 20%.</p>
<p>Here is the original image used:</p>
<img src="https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Результат
Еще один пример с использованием двух значений. Первое значение создает срезы, отсчитываемые от верха и низа. Второе — от левого и правого краев.
Пример свойства border-image-slice с двумя значениями:
Пример использования свойства CSS border-image-slice с двумя значениями
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
border-image-slice: 30 50;
}
</style>
</head>
<body>
<h2>Border-image-slice example</h2>
<p class="border">Here the border-image-slice is set to 30 and 50.</p>
<p>Here is the original image used:</p>
<img src="https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Пример свойства border-image-slice со значениями "%" и "fill":
Пример использования свойства CSS border-image-slice со значениями процента и fill
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
border-image-slice: 15% fill;
}
</style>
</head>
<body>
<h2>Border-image-slice example</h2>
<p class="border"><strong>Here the border-image-slice is set to 15 fill.</strong></p>
<p>Here is the original image used:</p>
<img src="https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| number | Представляет смещение края в пикселях для растровых изображений и координаты для векторных изображений. | Запустить » |
| % | Представляет смещение края в процентах от размера исходного изображения. | Запустить » |
| fill | Заставляет центральную часть изображения отображаться как фоновое изображение. | Запустить » |
| initial | Устанавливает свойству его значение по умолчанию. | |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что делает свойство border-image-slice в CSS?