}
效果：
对此我的理解是如下步骤：
详情请点击： slice切片的值比边框宽度大
demo2： 当盒子边框宽度比被切图片边框小的时候，如下代码
复制代码
.border-image{
border:14px solid #000; //盒子边框为14px
border-image-source:url(border.png);
border-image-slice:27 27 27 27; //边框图片被切成9个区域，其中4个顶角的大小为 27*27px
}
效果：
对此我的理解是如下步骤：
详情请点击： slice切片的值比边框宽度小
因此，我所了解的四个顶角的变化其实是带有拉伸功能的，当然假如说盒子边框和被切图片宽度相等，那么这样就不会有拉伸的效果。
说说fill值
fill值是一个可选属性值，假如指定这个值，那么第九区就会出现，假如不指定，那么第九区就被外星人攻占，隐藏起来！（楼下会有demo↓）
两点注意：
1、slice不允许设置负值，设置负值和设置大于盒子的高度或者宽度都被100%，（楼下有demo↓）
2、slice切过的区域有可能会重叠，如果右切和左切的值之和≥盒子的宽度，那么顶部区域(5号)和底部区域（7号）为空白（楼下有demo↓），反之亦然。
能不能控制图片边框的宽度，而不是每次都要调试盒子边框宽度？当然是有，下面就来介绍这个 border-image-width 这个可选属性值
边框图片宽度border-image-width
我叫border-image-width，我的作用就是代替盒子本身的边框宽度border-width。假如指定，那么边框图片宽度就由我来做主，假如不指定，那么图片边框宽度就由盒子的边框宽度来固定。我可以用具体像素、数字（表示几倍）和百分比来表示，最少1个值，最多4个值，分别代表上右下左图片边框宽度，注意哦，相关代码如下：
复制代码
.border-image{
border:20px solid #000; //盒子边框宽度为20px
border-image-source:url(border.png);
border-image-width:27px 1 10% 27px; //边框图片宽度设置为top:27px,right:1倍,bottom:10%,left:27px，因此这些值将代替20px成为图片边框宽度。
}
边框图片外凸border-image-outset
我叫border-image-outset，我的作用就让边框背景延伸到盒子外。有两个属性值length和number，前者是具体的像素单位，后者是数字，最少1个值，最多4个，分别代表上右下左图片边框向外延伸的距离，相关代码如下：
复制代码
.border-image{
border:27px solid #000; //盒子边框宽度为27px
