④ Элементы рамки-изображения

Продолжим изучение темы CSS3 - рамка. Если пропустили прошлые статьи, то вот ссылки на них:

Свойство определяет размер частей изображения, используемых для оформления границ элемента и делит изображение на девять частей: четыре угла, четыре края между углами и центральную часть.

border-image-slice

Значения:

число - Размер частей рамки можно задавать с помощь одного, двух, трех или четырех значений.
Одно значение устанавливает границы одинакового размера для каждой стороны элемента.
Два значения: первое определяет размер верхней и нижней границы, второе — правой и левой.
Три значения: первое определяет размер верхней границы, второе — правой и левой, а третье — нижней границы.
Четыре значения: определяет размеры верхней, правой, нижней и левой границы.
Числовое значение представляет количество px.
% - Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
fill - Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
initial - Устанавливает это свойство в значение по умолчанию.
inherit - Наследует значение этого свойства от родительского элемента.

Синтаксис

CSS

div {border-image-slice: 50 20;}

📷 РИС. 6. ПРИМЕР ЗАДАНИЯ СРЕЗОВ РАМКИ-ИЗОБРАЖЕНИЯ

Продолжение в следующей статье!