Свойство 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 |
Определяет, как будет отображаться изображение, заданное для рамки: растягиваться, повторяться или масштабироваться. |
Пример
html
head
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
/head
body
div id="round"Изображение повторяется для заполнения всей области./div
div id="stretch"Изображение растянуто, чтобы заполнить всю область./div
pЗдесь исходное изображение, которое используется в качестве границы:/p
img src="border.png"
/body
/html
|