toc

Intro

在css3中新增了border-image属性，用来定义边框的背景，它有很多的子属性，比较难理解与操作的便是border-image-slice属性，border-image-slice定义了如如何slice背景图像，使之以不同的方式装饰边框。

borde-image-slice属性值比较特殊，也是需要小心控制的地方。

• 属性值不带单位，默认为px。
• 支持百分比值。百分比值是相对背景图的大小，譬如widthheight的背景图，设置slice属性为10%后，其实际的属性值为height10%  width10%   height10%  width*10%
• 其工作的原理可以理解为：首先根据四个属性值a b c d按顺时针方向确定四个点（ad左上A点、ab右上B点、bc右下C点、cd坐下D点），然后再根据box的大小，将背景图根据Ａ、Ｂ、Ｃ、Ｄ四个点缩放或者拉伸至box的四个角，最后在根据border-width的值确定边框的粗细。
• 属性的四个值的大小（a+c相对于背景图height的大小、b+d相对于背景图width的大小）对边框的呈现有很大的关系，不同情况会有不一样的呈现（由下面的demo以及图列也能看出一二），可从上条的工作原理深入理解，特别注意极限的情况（有点数学的味道）。当然多变带来出彩~^~

1. 在实际应用的时候其css代码可以这样书写：

-webkit-border-image:url(slice.png) a b c d ; /*兼容webkit引擎*/ -moz-border-image:url(slice.png)   a b c d ;  /*兼容gecko引擎*/ -o-border-image:url(slice.png)  a b c d ;  /*兼容presto引擎*/ border-image:url(slice.png)  a b c d ;   /*兼容标准的用法*/

2. 不同浏览器的差异

首先看这个demo（下面的图都来自于demo）

a.如果你看到空白页面，很是遗憾ie系列的浏览器并不支持border-image属性，不知道到了ie10会不会支持。

b.其他内核的浏览器对border-image-slice在其私有前缀下的解释基本相同，如图

border-image-slice在不同浏览器中的效果

c.FF和Opera对border-image并不解释，但是Chrome却对其解释并且解释很是“标准”，而且如果你的css3代码中有标准的写法，Chrome会选择解释标准的border-image。

Chrome对border-image-slice的解析

由上图可以看出box内部的部分全部被清空这样看着更加像是一个边框。

d.因为偶尔也会用用金山的猎豹浏览器，以前一位同时webkit内核的浏览器，应该会跟Chrome很“神似”，但是今天才发现，两个浏览器还是不一样的。

猎豹浏览器对border-image-slice的解析

当borde-image-slice 属性值中a+c或b+d的值大于背景图的尺寸后，同样是webkit内核浏览器，Chrome和猎豹浏览器解释不同的，猎豹浏览器的解释更加倾向于从一个边框的角度去渲染呈现，而其他浏览器的呈现方式则有点死板。而且在猎豹浏览器中无论是对私有前缀-webkit和标准模式下的解释都是一样的。

e.最后说说border-image的另一个子属性repeat在标准模式下和浏览器私有属性的不同解释

border-imgae-repeat的不同解析

上图中前者是在border-image:url(slice1.png) 27 9 27 27 repeat;下的效果，后者是-webkit（-moz/-o）-border-image:url(slice1.png) 27 9 27 27 repeat;下的效果，可以看出，各个浏览器私有属性中其repeat是从中间开始的，而在标准的css3代码下，只是repeat边框部分。