CSS border-image Свойство
Пример
Укажите изображение в качестве границы вокруг элемента:
#borderimg {
border-image: url(border.png) 30 round;
}
Подробнее примеры ниже.
Определение и использование
Свойство border-image
позволяет указать изображение, которое будет использоваться в качестве границы вокруг элемента.
Свойство Border-Image является сокращенным свойством для:
Пропущенные значения устанавливаются в значения по умолчанию.
Значение по умолчанию: | none 100% 1 0 stretch |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.borderImage="url(border.png) 30 round" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
Note: See individual browser support for each value below.
Синтаксис CSS
border-image: source slice width outset repeat|initial|inherit;
Значения свойств
Значение | Описание | |
---|---|---|
border-image-source | Путь к изображению, используемому в качестве границы | |
border-image-slice | Как нарезать изображение границы | |
border-image-width | Ширина изображения границы | |
border-image-outset | Сумма, на которую область изображения границы выходит за границы рамки | |
border-image-repeat | Следует ли повторять, округлять или растягивать изображение границы | |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Различные значения среза полностью изменяют внешний вид границы:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
Похожие страницы
CSS Справочник: CSS Border Images
CSS Справка: border-image-outset Свойство
CSS Справка: border-image-repeat Свойство
CSS Справка: border-image-slice Свойство
CSS Справка: border-image-source Свойство
CSS Справка: border-image-width Свойство
HTML DOM Справочник: borderImage Свойство