Атрибут border-image CSS

определение и использование

атрибут border-image - это сокращенный атрибут, который используется для установки следующих атрибутов:

если значение опущено, будет установлено значение по умолчанию.

совет:используйте атрибуты border-image-* для создания красивых растяжимых кнопок!

еще参阅:

Обучение CSS3:Рамки CSS3

пример

определите изображение как границу div элемента:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

попробуйте сами

на странице есть более примеров.

CSS синтаксис

border-image: источник cut ширина outset repeat|initial|inherit;

значение атрибута

значение описание тест
border-image-source путь к изображению, используемому в границах.
border-image-slice внутренний отступ изображения границ.
border-image-width ширина изображения границ.
border-image-outset количество, на которое изображение границы выходит за рамки рамки.
border-image-repeat должна ли изображение граница быть повторенной (repeated), заполненной (rounded) или растянутой (stretched). тест

технические детали

по умолчанию: none 100% 1 0 stretch
наследование: нет
версия: CSS3
JavaScript синтаксис: объект.style.borderImage="url(border.png) 30 30 round"

более примеров

Кнопка с границей из изображения
Этот пример демонстрирует, как создать кнопку с помощью атрибута border-image.

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

числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-