CSS 3 border-image 属性
CSS border-image 属性是速记属性用于设置 border-image-source , border-image-slice , border-image-width , border-image-outset 和 border-image-repeat 的值
省略的值设置为它们的默认值
可以使用使用 border-image-* 属性来构建美丽的可扩展按钮
| 默认值 | none 100% 1 0 stretch |
|---|---|
| 继承 | no |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.borderImage="url(border.png) 30 30 round" |
语法
border-image: source slice width outset repeat|initial|inherit;
值说明
| 值 | 描述 |
|---|---|
| border-image-source | 用于指定要用于绘制边框的图像的位置 |
| border-image-slice | 图像边界向内偏移 |
| border-image-width | 图像边界的宽度 |
| border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
| border-image-repeat | 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round） |
浏览器支持
下表中的数字表示支持该属性的第一个浏览器版本号
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号
| 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
范例
指定作为 div 元素周围边框的图像
#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; }
更多范例
-
演示了如何创建一个 border-image 属性的按钮
相关文章
CSS3 基础教程: CSS3 边框