语法:
border-image : none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}
相关属性 : border-image:border-top-image , border-right-image , border-bottom-image , border-left-image
border-corner-image:border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image
取值:
- none:
- 默认值。无背景图。
- <image>:
- 使用绝对或相对 url 地址指定背景图像。
- <number>:
- 边框宽度用固定像素值表示。
- <percentage>:
- 边框宽度用百分比表示。
- [ stretch | repeat | round ]:
- 拉伸 | 重复 | 平铺 (其中stretch是默认值。)
说明:
- 使用图片作为对象的边界。
当table设置border-collapse为collapse无效。
引擎类型 | Gecko | Webkit | Presto |
---|---|---|---|
Border-image | -moz-border-image | -webkit-border-image | |
兼容性:
类型 | Internet Explorer | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
版本 | (×)IE6 | (×)Firefox 2.0 | (√)Chrome 1.0.x | (×)Opera 9.64 | (√)Safari 3.1 |
(×)IE7 | (×)Firefox 3.0 | (√)Chrome 2.0.x | (√)Safari 4 | ||
(×)IE8 | (√)Firefox 3.5 | ||||
示例:
使用的图片: