CSS3属性之border-image

CSS3的border范围内有border-radius、box-shadow，border-image三个属性，另外网上有些资料把border-color属性的多边框色也归到css3，不过经测试只有firefox支持，并且要加-moz-私有属性，然后去w3.org，去翻阅资料，没发现有介绍这个多边框色的属性，总结下来，应该是火狐的自家产物，并非W3C标准。接下来，这篇文章介绍css3之border-image属性。

语法：border-image: <border-image-source> || <border-image-slice> [ / <border-image-width> | / <border-image-width> ? /<border-image-outset> ] ? || <border-image-repeat>

相关说明：

border-image-source: none | <image>

默认无背景图,如果设置背景图，则使用绝对或相对 url地址指定背景图像。

border-image-slice: [<number> | <percentage>]{1,4} && fill?

裁剪这块相对比较复杂，其中参数number表示边框宽度，没有单位，专指像素；percentage用百分比设置表框的宽度，相对于背景图的大小，可以取1-4个值，遵循t-r-b-l的规则。fill默认为空，如果存在，则图片裁剪完后，中间剩余的部分将会保留下来。另外，裁剪完成后，背景图就成为9个部分，四个角、四个边和一个中心，俗称“九宫格”。下面结2张图，帮助理解下裁剪部分相关内容。



上面这幅图来自w3c，它按照上右下左的顺序，依次把背景图，切了4刀，形成了一个九宫格，而这里的border-image-slice取值为124；



上图（来自W3CPLUS，下面有些图也是来自w3cplus、w3c及msdn，不再敖述）border-image-slice的取值为百分比，top/bottom相对于背景图的高，left/right相对于背景图的长。

背景图裁切完后，接下来就是要把裁切的图应用绘制了，裁剪完后背景图被分为9个部分，如下图所示，其中，四个角在应用时会分布在应用元素的4个角上，不会有拉伸、平铺或者是重复的效果。其他四个（除了中间5）会应用border-image-repeat中设定的排列方式。



接下来，看排列方式的具体参数以及应用，来帮助理解裁剪后的背景图的应用绘制。

border-image-repeat: [ stretch | repeat | round | space ]{1,2}

该属性用来设置背景图的排列方式，分别为拉伸、重复、拉伸平铺、间隙平铺（其中stretch是默认值。），可以取1-2个值，第一个水平方向，第二个为垂直方向。下面继续结合几张图来帮助理解边框背景图片的排列方式。

引用的背景图为（81px*81px，每个小圆为27px*27px）



拉伸效果：

代码：

.box
width: 200px;
height: 50px;
border: 15px solid;
-webkit-border-image: url("border.png") 27 stretch;
border-image: url("border.png") 27 stretch;

图示：



重复效果：

代码：

.box
width: 200px;
height: 50px;
border: 15px solid;
-webkit-border-image: url("border.png") 27 repeat;
border-image: url("border.png") 27 repeat;

图示：



拉伸平铺：(平铺，拉伸裁剪的背景图来试整个边框填充)

代码：

.box
width: 200px;
height: 50px;
border: 15px solid;
-webkit-border-image: url("border.png") 27 round;
border-image: url("border.png") 27 round;

图示：



间隙平铺：(平铺，用间隙填补剩余的部分)

代码：

.box
width: 200px;
height: 50px;
border: 15px solid;
-webkit-border-image: url("border.png") 27 space;
border-image: url("border.png") 27 space;

图示：



另外：

1. 没有指定裁剪的范围及排列方式

代码：

.box
width: 200px;
height: 50px;
background: #000;
border: 15px solid red;
-webkit-border-image: url("border.png");
border-image: url("border.png");

图示：



2. 垂直和水平排列方式不同的情况

代码：

.box
width: 200px;
height: 50px;
background: #000;
border: 15px solid red;
-webkit-border-image: url("border.png") 27 stretch round;
border-image: url("border.png") 27 stretch round;

图示：



从另外两个例子还可以看出，虽然给border制定了颜色，但是用了border-image属性后，border的颜色不是border中设置的颜色，而是应用背景图片元素的背景色，这点需要注意。

border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}

通过定义距离边框图像区域边缘的向内偏移量，从而指定边框图像的宽度/高度，注意此属性和border-width的区别。

代码：

.box
width: 200px;
height: 50px;
border: 54px solid red;
border-image: url("border.png") 27/27px round;

图示：



border-image-outset: [ <length> | <number> ]{1,4}

指定边框图像区域超出边框的量。

代码：

.box
width: 200px;
height: 50px;
border: 54px solid red;
border-image: url("border.png") 27/15px/10px round;

图示：



边框宽度为54px，偏移量为10px，边框背景宽度为15px。

偏移量是建立在边框背景宽度的基础上的，所以设置偏移量的时候边框背景宽度不能为0。

兼容性：（来自http://caniuse.com）



ie依旧是让人捉急，不过最新版的ie11经测试，支持的比较好。在做demo的时候发现几个问题，这里说下：

1. safari回把border-image-repeat中的space识别为repeat。

2. 除了ie11，其他浏览器目前对于border-image-repeat: space支持不是很好，会把space按照其他的排列方式去解析。

3. -webkit-私有属性下border-image-width无效，对应的对border-image-outset应该也是不支持的。

总结：CSS3的border-image确实很强大，除了几个属性浏览器不完善外，该属性还是属于css3的应用比较广泛的属性之一，当然目前如果要做一些兼容，要避过border-image-width、border-image-outset一些属性的使用。