border-image-repeat
Укажите, как повторить изображение границы:
#borderimg
{
border-image-source: url(border.png);
border-image-repeat: repeat;
}
Попробуйте сами »
Определение border-image-repeat
CSS свойство border-image-repeat
определяет, должно ли изображение границы повторяться, округляться, разноситься на интервалы или растягиваться.
Совет: Также посмотрите на свойство border-image (сокращенное свойство для настройки всех свойств border-image-*).
Значение по умолчанию: | stretch |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.borderImageRepeat="round" Попробуй |
Поддержка border-image-repeat
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Синтаксис border-image-repeat
border-image-repeat: stretch|repeat|round|space|initial|inherit;
Примечание: Это свойство определяет, как масштабируются и разбиваются на плитки изображения по бокам и средней части изображения границы. Итак, здесь вы можете указать два значения. Если второе значение опущено, предполагается, что оно совпадает с первым.
Значения border-image-repeat
Значение | Описание | Демонстрация |
---|---|---|
stretch | Значение по умолчанию. Изображение растягивается, чтобы заполнить область | Демо ❯ |
repeat | Изображение выложено плиткой (повторяется), чтобы заполнить область | Демо ❯ |
round | Изображение разбивается на плитки (повторяется), чтобы заполнить область. Если область не заполняется целым числом плиток, изображение масштабируется таким образом, чтобы оно соответствовало размеру | Демо ❯ |
space | Изображение разбивается на плитки (повторяется), чтобы заполнить область. Если оно не заполняет область целым количеством плиток, дополнительное пространство распределяется вокруг плиток | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Страницы по теме border-image-repeat
CSS Учебник: CSS Границы изображения
CSS Справочник: border-image свойство
CSS Справочник: border-image-outset свойство
CSS Справочник: border-image-slice свойство
CSS Справочник: border-image-source свойство
CSS Справочник: border-image-width свойство
HTML DOM справочник: borderImageRepeat свойство