Свойство border-image позволяет одновременно задать значения таких свойств, как: border-image-source, border-image-width, border-image-slice, border-image-outset и border-image-repeat. Это удобно для создания красивых и стильных кнопок. Если какое-то значение не указано, оно автоматически берётся из стандартного значения соответствующего свойства. | Значение по умолчанию: | none 100% 1 0 stretch |
|---|
| Наследуется: | нет |
|---|
| Версия: | CSS3 |
|---|
| Синтаксис JavaScript: | object.style.borderImage="url(border.png) 30 30 round" |
|---|
| Значение | Описание |
|---|
| border-image-source | Указывает путь к изображению, которое будет использоваться в качестве границ рамки. | | border-image-slice | Определяет смещение изображения границы внутрь. | | border-image-width | Устанавливает ширину для изображения-границы. | | border-image-outset | Определяет, насколько область изображения-границы выходит за пределы элемента. | | border-image-repeat | Контролирует способ отображения границы: растягиваться, повторяться или масштабироваться. |
Примерhtmlhead style type="text/css" div { border-width: 15px; width: 250px; padding: 10px 20px; } #round { -moz-border-image: url("border.png") 30 30 round; /* Firefox */ -webkit-border-image: url("border.png") 30 30 round; /* Safari и Chrome */ -o-border-image: url("border.png") 30 30 round; /* Opera */ border-image: url("border.png") 30 30 round; } #stretch { -moz-border-image: url("border.png") 30 30 stretch; /* Firefox */ -webkit-border-image: url("border.png") 30 30 stretch; /* Safari и Chrome */ -o-border-image: url("border.png") 30 30 stretch; /* Opera */ border-image: url("border.png") 30 30 stretch; } /style/headbody div id="round"Изображение повторяется для заполнения всей области./div div id="stretch"Изображение растянуто, чтобы заполнить всю область./div pЗдесь исходное изображение, которое используется в качестве границы:/p img src="border.png"/body/html
|