Свойство CSS border-image-slice
Свойство CSS border-image-slice задаёт, как разрезать изображение из border-image-source на девять областей.
Свойство CSS border-image-slice определяет, как разрезать изображение, заданное свойством border-image-source, чтобы браузер мог использовать полученные части в качестве рамки. Изображение делится на девять областей: четыре угла, четыре стороны и средняя часть. Это одно из свойств CSS3.
Представьте две горизонтальные и две вертикальные линии, проведённые через исходное изображение. В местах пересечения они разбивают изображение на сетку 3×3. Четыре угловых фрагмента размещаются по углам рамки элемента, четыре боковых фрагмента растягиваются или повторяются вдоль каждой стороны (это управляется свойством border-image-repeat), а центральный фрагмент по умолчанию отбрасывается — он остаётся полностью прозрачным, если только вы не добавите ключевое слово fill, которое заставляет его отображаться позади содержимого как фоновое изображение.
border-image-slice — это свойство, которое определяет где именно проходят эти четыре линии. Само по себе оно не даёт видимого результата; оно всегда работает совместно с border-image-source и ненулевым значением border-width (или border-image-width сокращённого свойства). Именно поэтому в каждом примере ниже также задаётся прозрачная border, а исходное изображение подключается через сокращённое свойство border-image.
Как работают значения
Свойство принимает number, percentage и необязательное ключевое слово fill:
- number — смещение края, измеряемое в пикселях для растровых изображений (PNG, JPEG) и в координатах для векторных изображений (SVG). Обратите внимание: число здесь без единиц — пишите
30, а не30px. - percentage — смещение края в процентах от размера исходного изображения (по ширине для левого/правого разрезов, по высоте для верхнего/нижнего).
- fill — сохраняет и отображает среднюю область вместо того, чтобы её отбрасывать.
Можно задать от одного до четырёх значений смещения. Отрицательные значения не допускаются, а значения, превышающие размер изображения, обрезаются. Значения следуют стандартному порядку сторон CSS:
| Заданные значения | Смысл |
|---|---|
20% | Все четыре стороны разрезаются на одинаковом расстоянии. |
30 50 | Верх и низ = 30; левая и правая стороны = 50. |
30 50 10 | Верх = 30; левая и правая стороны = 50; низ = 10. |
30 50 10 5 | Верх = 30; правая = 50; низ = 10; левая = 5 (по часовой стрелке от верха). |
Когда это применять?
Используйте border-image-slice, когда создаёте декоративную рамку из одного изображения — замысловатые бордюры, ленточные края, панели в стиле комиксов или скруглённые «пузырьковые» графические элементы, которые должны масштабироваться под любой размер элемента без искажения углов. Вырезая угловые фрагменты из растягиваемой средней части сторон, вы сохраняете чёткость углов при любой ширине элемента, пока стороны повторяются или растягиваются по размеру.
| Начальное значение | 100%. |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM Syntax | 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("/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="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Результат
В следующем примере используются два значения. Первое значение (30) задаёт разрезы, отмеряемые от верха и низа, а второе значение (50) — от левой и правой сторон.
Пример свойства border-image-slice с двумя значениями:
Пример свойства CSS border-image-slice с двумя значениями
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("/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="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>В следующем примере значение % сочетается с ключевым словом fill, поэтому отбрасываемая средняя область изображения также отображается позади содержимого абзаца.
Пример свойства border-image-slice со значениями "%" и "fill":
Пример свойства CSS border-image-slice со значениями процента и fill
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("/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="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| number | Задаёт смещение края в пикселях для растровых изображений и в координатах для векторных. | Попробовать » |
| % | Задаёт смещение края в процентах от размера исходного изображения. | Попробовать » |
| fill | Отображает среднюю часть изображения в качестве фонового изображения. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
border-image-slice — одно из нескольких подсвойств, составляющих сокращённое свойство border-image. Чтобы получить полное представление о том, как строятся рамки из изображений, смотрите также:
- border-image-source — задаёт изображение для разрезания.
- border-image-width — задаёт ширину области рамки изображения.
- border-image-repeat — управляет тем, как боковые фрагменты растягиваются, повторяются или округляются.
- border-image-outset — выдвигает рамку из изображения за пределы блока рамки.