Свойство border-image-repeat

Последнее обновление: 29.12.2010

Свойство border-image-repeat — определяет каким образом отображать боковые фрагменты фонового изображения границы заданного свойством border-image-source по оси x и по оси y.

Если задано одно значение, оно распространяется на обе оси.

Допустимые значения

  • stretch — фрагмент растягивается для заполнения области.
  • repeat — фрагмент повторяется для заполнения области.
  • round — фрагмент повторяется для заполнения области и масштабируется таким образом, чтобы количество фрагментов было целым .
картинка для рамки  border-image
картинка для рамки border-image
иллюстрация CSS свойства border-image-repeat:stretch иллюстрация CSS свойства  border-image-repeat:repeat иллюстрация CSS свойства  border-image-repeat:round
иллюстрация border-image-repeat:stretch иллюстрация border-image-repeat:repeat иллюстрация border-image-repeat:round
Значение по умолчанию stretch
Применимо ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’.
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример

.block {
width:100px;
height:50px;
border-image-source:url(http://www.mpbox.ru/assets/images/logo.jpg) ;
border-image-slice: 20 10% 15 20;
border-image-repeat:round;
border:20px solid #000;
}
Твой код:
Результат:
большой полигон

Заметки

Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

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

По теме

Показать комментарии