CSS3 border-image 属性

说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

语法：

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 | space ]{1,2}

    默认值：stretch

    该属性用于指定边框背景图的填充方式。可定义0-2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为stretch，则可省略不写。

    写本文档时Opera尚不支持该属性，但却默认使用了stretch的效果

取值：

none：
无背景图片。
<url>：
使用绝对或相对地址指定图像。
<number>：
用浮点数指定宽度。不允许负值。
<percentage>：
用百分比指定宽度。不允许负值。
<length>：
用长度值指定宽度。不允许负值。
stretch：
指定用拉伸方式来填充边框背景图。
repeat：
指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round：
指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果

说明：

设置或检索对象的边框样式使用图像来填充。
  • 使用图像替代border-style去定义边框样式。当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。
  • 对应的脚本特性为borderImage。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 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)  

示例：