Свойство 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
|