пример
Укажите изображение в качестве границы вокруг элемента:
#borderimg {
-webkit-border-image: url(border.png) 30
round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Свойство границы изображения позволяет указать изображение, которое будет использоваться вместо нормальной границы вокруг элемента.
Свойство границы изображения свойство является обобщающим для установки границы изображения источника , границы изображения срезов , границы изображения ширины , на границе-изображения боковик и границы изображения повторяющихся свойств.
Опущенные значения установлены в их значения по умолчанию.
| Значение по умолчанию: | none 100% 1 0 stretch |
|---|---|
| Наследование: | no |
| Animatable: | no. Read about animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.borderImage="url(border.png) 30 round" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -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 -о- |
Примечание: См индивидуальную поддержку браузера для каждого значения ниже.
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 | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Еще примеры
пример
Различные значения среза полностью меняет внешний вид границы:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} Попробуй сам " Похожие страницы
CSS3 учебник: CSS3 Пограничные Изображения
CSS Справка: border-image-outset property
CSS Справка: border-image-repeat property
CSS Справка: border-image-slice property
CSS Справка: border-image-source property
CSS Справка: border-image-width property
HTML DOM ссылка: borderImage property