CSS border-image 属性
下面有更多实例。
定义和用法
border-image 属性允许指定要用作元素周围边框的图像。
border-image 属性是一个简写属性，用于设置以下属性：
省略的值将设置为其默认值。
| 默认值: | none 100% 1 0 stretch |
|---|---|
| 继承性: | no |
| 支持动画: | no. 阅读有关动画的信息 |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.borderImage="url(border.png) 30 round" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
紧跟在 -webkit-, -moz- 或 -o- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
注释: See individual browser support for each value below.
语法
border-image: source slice width outset repeat|initial|inherit;
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| border-image-source | 要用作边框图像的路径 | |
| border-image-slice | 图片边框向内偏移。 | 亲自试一试 » |
| border-image-width | 图片边框的宽度。 | |
| border-image-outset | 边框图像区域超出边框的量。 | |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 | 亲自试一试 » |
| initial | 将此属性设置为其默认值。请参阅 initial | |
| inherit | 从其父元素继承此属性。请参阅 inherit |
更多实例
实例
不同的 slice 值会完全更改边框的外观：
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
亲自试一试 »
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
相关页面
CSS 教程: CSS 边框图片
CSS 参考手册: border-image-outset 属性
CSS 参考手册: border-image-repeat 属性
CSS 参考手册: border-image-slice 属性
CSS 参考手册: border-image-source 属性
CSS 参考手册: border-image-width 属性
HTML DOM 参考手册: borderImage 属性
