③ Ширина и ресурс рамки-изображения

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

• ① Закругление углов
• ② Рамки-изображения

Ширина рамки-изображения

Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1.

border-image-width

Значения:

• длина - Устанавливает ширину рамки в единицах длины — px / em. Можно задавать от одной до четырех значений одновременно. Если задано одно значение, то ширина всех сторон рамки одинакова, два значения задают ширину верхней-нижней и правой-левой и т.д.
• число - Числовое значение, на которое умножается значение border-width.
• % - Ширина рамки элемента вычисляется относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
• auto - Соответствует значению border-image-slice.
• initial - Устанавливает это свойство в значение по умолчанию.
• inherit - Наследует значение этого свойства от родительского элемента.

Синтаксис

CSS

div {border-image-width: 30px;}

Ресурс рамки-изображения

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

border-image-source

Значения:

• none - Отсутствие изображения для рамки. Значение по умолчанию.
• url(url) - Относительный или абсолютный путь к изображению.
• initial - Устанавливает это свойство в значение по умолчанию.
• inherit - Наследует значение этого свойства от родительского элемента.

Синтаксис

CSS

div {border-image-source: url(border.png);}

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