border-image
Обновлено: 15.12.2022
border-image
Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.
Краткая информация
| Значение по умолчанию | none |
| Наследуется | Нет |
| Применяется | Ко всем элементам, за исключением тех, у кого border-collapse задан как collapse |
| Анимируется | Нет |
Синтаксис
border-image: none | [ <адрес> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] &&
[stretch | repeat | round]{0,2}
Значения
| none | Не отображает рисованную рамку, используется установленный стиль границы. |
| <адрес> | Путь к графическому файлу. Обязательный параметр. Само изображение для создания рамки продемонстрировано на рис. 1 и состоит из девяти областей: четырёх уголков, верхней, правой, нижней, левой стороны и центральной части, в которой выводится содержимое элемента. |
| <число> | Одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселях, задавая тем самым области деления. Сами единицы не пишутся, только число (10, а не 10px).На рис. 2 красными линиями выделены необходимые для создания рамки области. |
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Табл. 1. Зависимость от числа значений
|
| <проценты> | Аналогично <числу>, но значения задаются в процентах. Тот или другой параметр обязателен. |
| <толщина> | Через слэш пишется одно, два, три или четыре значения толщины границы на каждой стороне элемента. Является аналогом border-width и использует тот же синтаксис. |
| stretch | Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию. |
| repeat | Повторяет рисунок границы. |
| round | Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений. |
Пример
Объектная модель
Объект.style.borderImage
Примечание
Firefox до версии 15.0 поддерживает свойство -moz-border-image.
Safari до версии 6.0, Chrome до версии 15.0, Android до версии 4.4 поддерживают свойство -webkit-border-image.
Opera до версии 15.0 поддерживает свойство -o-border-image.