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

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

• ① Закругление углов

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

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 42

Свойство позволяет устанавливать изображение в качестве рамки элемента. Основное требование, предъявляемое к изображению — оно должно быть симметричным.

border-image

Значения:

• краткая запись - Устанавливает рамку-изображение с помощью одного свойства, являющегося краткой записью свойств border-image-source, border-image-slice, border-image-width, border-image-outset и border-image-repeat. Значения свойств умолчанию: none 100% 1 0 stretch.
• initial - Устанавливает это свойство в значение по умолчанию.
• inherit - Наследует значение этого свойства от родительского элемента.

Синтаксис

CSS

/* border-image-source и border-image-slice */
border: 10px solid transparent;
border-image: url(border_round.png) 30;

/* border-image-source и border-image-slice и border-image-repeat */
border: 10px solid transparent;
border-image: url(border_round.png) 30 space;

/* border-image-source и border-image-slice / border-image-width */
border-image: repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent 30px, transparent 40px) 20 / 20px;

/* border-image-source и border-image-slice / border-image-width / border-image-outset и border-image-repeat */
border-image: linear-gradient(to right, salmon 0%, purple 100%) 10 / 10px / 20px space;

При помощи такого простого изображения можно получить вот такие рамки для элемента.

CSS

/* Пример 1 */
div {
width: 260px; height: 100px; 
border-style: solid;
border-image-width: 15px;
border-image-source: url(border_round.png);
border-image-slice: 30;
border-image-repeat: stretch;
}
/* Пример 2 */
div {
width: 260px; height: 100px; 
border-style: solid;
border-image-width: 15px;
border-image-source: url(border_round.png);
border-image-slice: 30;
border-image-repeat: round;
}

Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat. Размер угловой части (в данном примере это число 30), задается с помощью значения свойства border-image-slice.

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