border-image CSS
Свойство border-image
используется для отображения рисованной рамки вокруг элемента.
Толщина рамки задаётся свойством border
, при этом если указано border: 0
, то рамка не выводится. При других значениях border
рисунок всегда имеет приоритет. Фон, если он задан через свойство background
, отображается под рамкой.
- Значение по умолчанию:
none
- Наследуется:
- Нет
- Применяется:
Ко всем элементам, за исключением тех, у кого
border-collapse
задан какcollapse
- Анимируется:
- Нет
- Объект JavaScript:
-
object.style.borderImage
- Спецификации:
- Поддержка браузерами:
Синтаксис
/* image-source | height | width | repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;
Значения
-
none
— Не отображает рисованную рамку, используется установленный стиль границы. -
URL
— Путь к графическому файлу. Обязательный параметр.
Само изображение для создания рамки продемонстрировано на рис. 1 и состоит из девяти областей: четырёх уголков, верхней, правой, нижней, левой стороны и центральной части, в которой выводится содержимое элемента.
-
<число>
— Одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселях, задавая тем самым области деления. Сами единицы не пишутся, только число (10, а не 10px).На рис. 2 красными линиями выделены необходимые для создания рамки области.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Число значений | Результат |
---|---|
1 | Устанавливает границы одинаковой толщины на каждой стороне рисунка. |
2 | Первое значение устанавливает высоту верхней и нижней границы, второе — левой и правой. |
3 | Первое значение определяет высоту верхней границы, второе — левой и правой, а третье — высоту нижней границы. |
4 | Поочерёдно устанавливается размеры верхней, правой, нижней и левой границы. |
-
<проценты>
— Аналогично<числу>
, но значения задаются в процентах. Тот или другой параметр обязателен. -
<толщина>
— Через слэш пишется одно, два, три или четыре значения толщины границы на каждой стороне элемента. Является аналогомborder-width
и использует тот же синтаксис. -
stretch
— Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию. -
repeat
— Повторяет рисунок границы. -
round
— Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.
Влияние этих параметров на вид рамки показано на рисунках.
Примеры
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-image</title>
<style>
div {
border: 30px solid #40c4c8;
padding: 20px;
border-image: url(/example/image/bg-image.png) 30 round round;
}
</style>
</head>
<body>
<div>Витраж представляет собой композицию сделанную из
множества цветных стекол обрамлённых проволокой и наиболее
эффектно смотрится при прохождении через него солнечного
или искусственного света.</div>
</body>
</html>