Свойство border-image-slice

Свойство border-image-slice указывает браузеру, какие части картинки пойдут на уголки, а какие на стороны (а какая часть будет центральной). На уголки идут 4 части, на стороны идут 4 части и одна часть (центральная) идет на фон элемента (опционально, ключевое слово fill).

Для более подробной информации смотрите свойство border-image.

Синтаксис

С числами и процентами через пробел может стоять ключевое слово fill.

<+css+> селектор { border-image-slice: от 1-го до 4-х чисел | от 1-го до 4-х процентов; } <-css->

Значения

Значение	Описание
проценты	Проценты рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
числа	Числа - это пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются.
fill	Поведение по умолчанию предполагает то, что центральная часть изображения будет отброшена. Для того чтобы задействовать ее, необходимо использовать ключевое слово fill в дополнение к числам или процентам.

Количество параметров

Смещение может принимать 1, 2, 3 или 4 параметра. Обратите внимание на то, что единицы измерения для смещения не пишутся (например, просто 20, а не 20px). Также можно задавать толщину в %.

Число параметров	Описание
1	Толщина для всех сторон одновременно.
2	1 2; - 1px для верха и низа, 2px для левой и правой.
3	1 2 3; - 1px для верха, 2px для левой и правой, 3px для низа.
4	1 2 3 4; - 1px для верха, 2px для правой, 3px для низа, 4px для левой.

Значение по умолчанию: 100%(?).

Пример

<+html+>

<-html-> <+css+> #elem { border-image-source: url("/content/markup/manual/css/property/border-image-slice/&/image/border-image.png as image.png"); border-image-slice: 26; border-style: solid; border-width: 26px; width: 200px; height: 200px; background: green; margin: 0 auto; } <-css-> <-shexec->

Пример

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Смотрите также

свойство border-image,
которое является сокращением для границы-картинки
свойство border-image-source,
которое задает путь к картинке для границы
свойство border-image-repeat,
которое повторение картинки для границы
свойство border-image-width,
которое задает размер картинки для границы
свойство border-image-outset,
которое задает сдвиг картинки для границы