Руководство по CSS

Правила CSS (RULES)

Полный список свойств CSS

Атрибут border-image-slice CSS3 Атрибут border-image-outset CSS3

Метод использования и примеры CSS border-image-repeat

Свойство border-image-repeat CSS определяет, как масштабировать или ткать центральную часть изображения рамки, чтобы она соответствовала размеру рамки.

В таблице ниже приведено описание использования и истории версий этого свойства, а также синтаксис использования этого свойства в скриптах JavaScript.

Значение по умолчанию:	stretch
Applies к:	Все элементы, но когда атрибут border-collapse элементов таблицы (например, tr, th, td) имеет значение collapse, атрибут border-image-repeat не действует. Это также applies к::first-letter.
Наследование:	Нет
Анимировано:	Нет.См. также Анимационные свойства.
Версия:	Новая функция CSS3
Синтаксис JavaScript:	object.style.borderImageRepeat = "round"

Использование синтаксиса border-image-repeat

Синтаксис этого свойства следующий:

border-image-repeat:　[　stretch　|　repeat　|　round　|　space　]　1　or　2　values　|　initial　|　inherit

Ниже приведён пример того, как использовать свойство border-image-repeat.

Пример

.box　{
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px　solid　transparent;
　　　　border-image-source:　url("border.png");
　　　　border-image-slice:　30;
　　　　border-image-repeat:　round;
}

Проверьте, как это работает‹/›

Значения свойств

В таблице ниже описаны значения этого свойства.

Значение	Описание
stretch	Изображение растягивается, чтобы заполнить область между краями рамки. Это значение по умолчанию.
repeat	Изображение тиснётся или повторяется, пока оно не заполнит область между краями рамки.
round	Изображение тиснётся или повторяется, пока оно не заполнит область между краями рамки. Если эта область не может быть заполнена целым количеством мозаики, изображение будет масштабироваться, чтобы заполнить её.
space	Изображение тиснётся или повторяется, пока оно не заполнит область между краями рамки. Если эта область не может быть заполнена полностью, избыточное пространство будет распределено вокруг мозаики.
initial	Установить этот параметр в его значение по умолчанию.
inherit	Если указано, то связанный элемент использует вычисленное значение свойства border-image-repeat родительского элемента.

Совместимость браузеров

Совместимость браузеров для свойств border-image-repeat, числа в таблице ниже представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.

	Firefox 15+ Google Chrome 15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+

Для получения дополнительной информации

См. также учебник:CSS3 рамка,CSS рамка.

Связанные свойства:border-image,border-image-source,border-image-slice,border-image-width,border-image-outset,border.

Атрибут border-image-slice CSS3 Атрибут border-image-outset CSS3