border-image
Укажите изображение в качестве границы вокруг элемента:
#borderimg {
border-image: url(border.png) 30 round;
}
Попробуйте сами »
Определение border-image
CSS свойство border-image
позволяет определить изображение, которое будет использоваться в качестве границы вокруг элемента.
Свойство border-image является сокращенным свойством для:
Пропущенным значениям присваиваются значения по умолчанию.
Значение по умолчанию: | none 100% 1 0 stretch |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.borderImage="url(border.png) 30 round" Попробуй |
Поддержка border-image
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -webkit-, -moz- или -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- |
Примечание: Смотрите раздел "Поддержка отдельных браузеров" для каждого значения ниже.
Синтаксисborder-image
border-image: source slice width outset repeat|initial|inherit;
Значения border-image
Значение | Описание | Демонстрация |
---|---|---|
border-image-source | Путь к изображению, которое будет использоваться в качестве границ | Демо ❯ |
border-image-slice | Как обрезать изображение с границей | Демо ❯ |
border-image-width | Ширина границы изображения | Демо ❯ |
border-image-outset | Величина, на которую область изображения с границами выходит за пределы бокса | Демо ❯ |
border-image-repeat | Следует ли повторять изображение границы, закруглять или растягивать | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры border-image
Различные значения среза полностью меняют внешний вид границы:
#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;
}
Попробуйте сами »
Страницы по теме border-image
CSS Учебник: CSS Границы Images
CSS Справочник: border-image-outset свойство
CSS Справочник: border-image-repeat свойство
CSS Справочник: border-image-slice свойство
CSS Справочник: border-image-source свойство
CSS Справочник: border-image-width свойство
HTML DOM справочник: borderImage свойство