border-image:<border-image-source> || <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? || <border-image-repeat>
为了方便理解border-image的取值,可将border-image理解成由以下5个伪属性组成:
border-image-source : none | <url>
默认值:none
该属性用于指定是否用图像定义边框样式或图像来源路径。
border-image-slice : [ <number> | <percentage> ]{1,4} && fill?
默认值:100%
该属性用于指定对边框背景图的分割方式
写本文档时尚无浏览器支持参数值 fill 关键字
border-image-width : [ <length> | <percentage> | <number> | auto ]{1,4}
默认值:1
该属性用于指定边框宽度。该属性可省略,由外部的border-width来定义
写本文档时所有浏览器只支持<length>类型的参数值
也可以省略此属性,在外部用border-width属性来设置该值
border-image-outset : [ <length> | <number> ]{1,4}
默认值:0
该属性用于指定对边框背景图的扩展
写本文档时尚无浏览器支持该属性
border-image-repeat : [ stretch | repeat | round ]{1,2}
默认值:stretch
该属性用于指定边框背景图的填充方式。可定义0-2个参数值,即水平和垂直方向。如果2个值相同,可合并成1个,表示水平和垂直方向都用相同的方式填充边框背景图;如果2个值都为stretch,则可省略不写。
写本文档时Opera尚不支持该属性,但却默认使用了stretch的效果
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera |
---|---|---|---|---|---|
版本 | 6.0-10.0 | 4.0-9.0 | 5.1 | 13.0-16.0 | 11.50-11.60 |
内核类型 | 写法(border-image) |
---|---|
Webkit(Chrome/Safari) | -webkit-border-image |
Gecko(Firefox) | -moz-border-image |
Presto(Opera) | -o-border-image |
Trident(IE) |