CSS3 border-image property
Examples
Designated as a border around the image div element:
div
{
-webkit-border-image: url (border.png) 30 30 round; / * Safari 5 * /
-o-border-image: url (border.png) 30 30 round; / * Opera * /
border-image: url (border.png) 30 30 round;
}
{
-webkit-border-image: url (border.png) 30 30 round; / * Safari 5 * /
-o-border-image: url (border.png) 30 30 round; / * Opera * /
border-image: url (border.png) 30 30 round;
}
try it"
In the bottom of this page for more examples.
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
Attributes | |||||
---|---|---|---|---|---|
border-image | 16.0 4.0 -webkit- | 11.0 | 15.0 3.5 -moz- | 6.0 3.1 -webkit- | 15.0 11.0 -o- |
Attribute definitions and instructions
border-image property is a shorthand property used to set the border-image-Source , border-image-Slice , border-image-width , border-image-OUTSET and border-image-repeat value.
Omitted settings to their default values.
Tip: to build beautiful scalable buttons using border-image- * properties!
Defaults: | none 100% 1 0 stretch |
---|---|
inherit: | no |
version: | CSS3 |
JavaScript syntax: | object .style.borderImage = "url (border.png)30 30 round" |
grammar
border-image:source slice width outset repeat;
值 | 描述 |
---|---|
border-image-source | 用于指定要用于绘制边框的图像的位置 |
border-image-slice | 图像边界向内偏移 |
border-image-width | 图像边界的宽度 |
border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
border-image-repeat | 这个例子演示了如何创建一个border-image 属性的按钮。 |
More examples
Image Button
This example demonstrates how to create a border-image attribute button.
related articles
CSS3 tutorial: CSS3 Borders