你们一定是很好奇，我具体是怎么工作机制的呢，就算csser指定了几个数字上去，但是压根就不懂他是怎么工作的，那就呵呵啦。所以下面带来详解：
图片用了w3c指定专用产品~一个81px的正方形位图，9个菱形图案，每个菱形图案为27*27px
左上角、右上角、右下角、左下角为4个橙色菱形，顶部区域、右侧区域、底部区域、左侧区域为4个土黄菱形，中间块（贱称第九区）为透明块。刚刚也说过了，这个border-image-slice就是一个切片的作用，把图像直接切开，中间不留痕迹，假如给定这个属性值： border-image-slice:27 27 27 27 那么它代表的意思是距离顶部内偏移区域27px处横切一刀
接着距离右侧内偏移区域27px竖切一刀
紧接着距离底部内偏移区域27px横切一刀
接着距离左侧内偏移区域27px竖切一刀
那么给定图像切片 border-image-slice:27 27 27 27 完整动态图如下：
这几刀下来把我分成了9个部分，因此我被9宫格也就此由来
所以被切割的部位都分布在盒子边框这9个地方，如上所示。对应的，被分隔的图像只能在边框宽度（border-width）内活动，什么意思呢，比如盒子边框为 border-width:54px 分割图片为 border-image-slice:27 ，因为图像4个顶角的宽度和高度都只有27px，但是盒子的边框是54px，因此图片就要被水平方向和垂直方向拉伸到切好跟盒子边框宽度等同，即27px的图像拉伸到54px停止，再往前就不行了！这点上，跟 鑫哥 的解释有点不太一样，因为他觉得这个是视觉中盲点，被分隔的顶角图像只是分配到边框的4个顶角，不会平铺，不会重复、不会拉伸（这点跟我说得不符合），引用原文如下：
橙红色的四个边角的菱形区域称为“角边框图片”，在border-image中，角边框图片是没有任何展示效果的，不会平铺，不会重复，也不会拉伸，有点类似于视觉中盲点的意思。
为了证明我的观点，我用了两个demo来展示一下，
demo1： 当盒子边框宽度比被切图片边框大的时候，如下代码
复制代码
.border-image{
border:54px solid #000; //盒子边框为54px
border-image-source:url(border.png);
border-image-slice:27 27 27 27; //边框图片被切成9个区域，其中4个顶角的大小为 27*27px
