CSS свойство border-image-slicecss3

CSS свойства

Определение и применение

CSS свойство border-image-slicecss3 определяет, как разделить изображение, используемое в роли изображения-границы и указанное в свойстве border-image-sourcecss3. В настоящее время браузер Chrome не отображает изображение-границу если у элемента не задано свойство border.

Схема работы свойства CSS - border-image-outset Схема работы свойства CSS - border-image-outset

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
border-image-slicecss315.015.015.06.011.012.0

CSS синтаксис:

border-image-slice:"number | % | fill | initial | inherit";

/* значение применяется ко всем сторонам */
border-image-slice: 3;

/* первое значение применяется к горизонтали(top и bottom), а второе к вертикали (right и left) */
border-image-slice: 10 15;

/* первое значение - top, второе применяется к вертикали (right и left), а третее к bottom */
border-image-slice: 5% 10% 15%;

/* по порядку: top right bottom left */
border-image-slice: 5 10 10% 15;

/* значение fill может быть указано в любом месте */
border-image-slice: 5 fill 10 10% 10;

JavaScript синтаксис:

object.style.borderImageSlice = "100%"

Значения свойства

ЗначениеОписание
numberУказывается число для смещения, которое означает для растровых изображений - количество пикселей (обратите внимание, что px не указывается), а для векторных изображений координаты. Допускается указать от одного до четырех значений (top, right, bottom и left). Угловые куски разделённого изображения будут размещены в углах элемента, к которому применяется свойство. Края разделённых изображений будут помещены по краям элемента (по умолчанию будут растянуты - значение stretch свойства border-image-repeatcss3. Отрицательные значения недопустимы. Значения больше, чем размер изображения интерпретируются как 100%.
%Проценты указаны относительно высоты или ширины используемого изображения. Значение по умолчанию 100%.
fillОпределяет отображать или нет центральную часть изображения. Ключевое слово fill используется совместно со значениями number и/или % .
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Использование свойства border-image-slice</title>
<style> 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width : 170px; /* устанавливаем ширину блока */
height : 100px; /* устанавливаем высоту блока */
padding : 10px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */
border : 10px solid transparent; /* устанавливаем сплошную прозрачную границу размером 10 пикселей */
border-image-source : url(img-border.png); /* устанавливаем путь к изображению, которое будет использовано в качестве границы */
border-image-width : 20px; /* устанавливаем ширину границы-изображения */
}
.test   {border-image-slice : 100%;}  /* значение в процентах применяется ко всем сторонам (по умолчанию) */
.test2 {border-image-slice : 30;}  /* значение в пикселях применяется ко всем сторонам  */
.test3 {border-image-slice : 25% 45% 25% 45%;}  /* значения (по порядку): top right bottom left */
</style>
</head>
	<body>
		<p><b>Первоначальное изображение:</b></p>
		<img src = "img-border.png" alt = "ramka"><br>
		<div class = "test">slice 100%</div>
		<div class = "test2">slice 30</div>
		<div class = "test3">slice 25% 45% 25% 45%</div>
	</body>
</html>

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

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

Результ нашего примера:

Пример использования свойства border-image-slice.
Пример использования свойства border-image-slice.
CSS свойства