Свойство CSS border-image
Пример
Укажите изображение в качестве границы вокруг элемента:
#borderimg {
border-image: url(border.png) 30 round;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство border-image
позволяет указать изображение, которое будет использоваться в качестве границы вокруг элемента.
Свойство border-image является сокращенным свойством для:
- граница-изображение-источник
- граница-изображение-срез
- граница-изображение-ширина
- граница-изображение-начало
- граница-изображение-повторить
Пропущенные значения устанавливаются в значения по умолчанию.
Значение по умолчанию: | нет 100% 1 0 стрейч |
---|---|
Унаследовано: | нет |
Анимация: | нет. Читать об анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.borderImage="url(border.png) 30 раундов" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
Примечание. См. поддержку отдельных браузеров для каждого значения ниже.
Синтаксис CSS
border-image: source slice width outset repeat|initial|inherit;
Значения свойств
Value | Description | Play it |
---|---|---|
border-image-source | The path to the image to be used as a border | |
border-image-slice | How to slice the border image | |
border-image-width | The width of the border image | |
border-image-outset | The amount by which the border image area extends beyond the border box | |
border-image-repeat | Whether the border image should be repeated, rounded or stretched | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about 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
Справочник по CSS: свойство border-image-outset
Справочник по CSS: свойство border-image-repeat
Справочник по CSS: свойство border-image-slice
Справочник по CSS: свойство border-image-source
Справочник по CSS: свойство border-image-width
Справочник по HTML DOM: свойство borderImage