CSS3 border-image Property

例

指定一个图像元素周围边框：

#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
动画：	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 3.1 -webkit-	15.0 11.0 -O-

注：请参阅下面的每个值单独浏览器的支持。

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;
}

试一试»

CSS 参考

CSS 属性

CSS3 border-image Property

例

定义和用法

浏览器支持

CSS语法

属性值

更多示例

例

相关页面