1. border-image的兼容性
border-image可以说是CSS3中的一员大将，未来一定会大放异彩，其应用潜力确实令人惊叹。 遗憾的是，目前支持的浏览器有限，只有Firefox3.5、chrome浏览器、Safari3+支持border-image。 所以，就本文而言，IE浏览器可以回去休息，Firefox3及以下，Opera浏览器也可以休息看《阿凡达》。 因此，本文提供的一些演示页面只能在Firefox3.5+、chrome或Safari3+浏览器下看到疗效。
2.熟悉border-image的一些特点
我们可能熟悉CSS2中的background属性，如：background:url(xx.jpg)27pxno-repeat;
指的是图片（url(xx.jpg)）、位置（27px）、重复性（no-repeat）。
border-image 与此类似，border-image 包括图片、裁剪位置（与背景位置相同，也是一个值，也支持百分比值）、重复性。 如：border-image:url(border.png)27repeat;，指图片(url(border.png))，裁剪位置(27)，重复形式(repeat)。 尝试比较背景，这有助于记住 border-image 属性。
具体描述一下border-image的参数
border-image的参数就是上面提到的三个：图像、裁剪位置、重复性。
1. 图片（边框-图像-源）
和CSS2中的background-image属性一样，border-image的背景图片是使用url()调用的，图片可以是相对路径也可以是绝对路径，也可以没有图片，即border-image:none；
2.图像裁剪位置（border-image-slice）
该参数的特点比较明显：
1.没有单位，指的是像素。 这和flash的as脚本类似，舞台的高度和宽度、影片剪辑的大小、位移都直接是一个没有单位的值，因为默认单位是像素（px）。 如：border-image:url(border.png) 27repeat; 这里的27指的是27个像素。
2.支持比例值，比例值的大小是相对于边框图片而言的，假设边框图片的大小为400px*300pxcss边框图片，那么20%的实际效果就是裁剪60px80px60px80px的图片四个边。
3、剪裁功能。 如果你对CSS中的clip属性（clip:rect(auto,auto,auto,auto)）比较了解的话，这里会更容易理解。 Clip可以说是CSS中明目张胆的裁剪属性，但是这里的属性似乎并不是意义上的裁剪，而从border-image的效果实现来看，它似乎是一个裁剪工具，将将边框图像分割成碎片，然后进行重新定位和变换。 。 它有1到4个参数，其方向规则符合CSS通用方向规则（与margin、padding等或border-width一致），top、right、bottom、left、顺时针，然后给出的含义切割。 举个简单的例子，上面提到了支持比例长度，所以这里的表达式“30%35%40%30%”可以用右图表示：
看图就是说，从图片底部裁剪30%，从右边裁剪35%，从顶部裁剪40%，从右边裁剪30%。 于是总共对图片进行了“四次切割”，得到了九个独立的区域，也就是九个方格，这也是下面深入讲解border-image的基础。
3. 重复性（边框-图像-重复）
这里的重复和背景的背景重复是不一样的，而且差别还是蛮大的。 背景图片重复、不重复、横向重复、纵向重复。 其实就是围绕着repeat（重复）这个词，家庭主导。 至于border-image，堪称三足鼎立，重复（repeat）只是其中之一，另外两个就是圆形（tile）和拉伸（stretch）。 其中，stretch为默认值。
有0~2个参数，0个使用默认值--stretch，例如：border-image:url(border.png)30%40%； 相当于 border-image:url(border.png)30%40%stretchstretch; ;1表示水平和垂直方向均使用该参数； 如果有2个参数，第一个参数表示水平方向，第二个参数表示垂直方向。 如：border-image: url(border.png) 30% 40%; 相当于border-image: url (border.png) 30% 40% roundrepeat; 意思是水平圆形（平铺），垂直重复（重复），至于什么是平铺，什么是重复，下面会深入讲解。
3.深入理解border-image的长度和显示方法
虽然单独理解border-image的长度或者显示方式并不难，但关键是这三者组合使用时的含义，需要花费一定的功夫才能理解。
九宫格模型帮助理解
什么是九宫格？ 为什么需要九宫格来帮助我们理解？
“九宫格”是中国绘画史上一种模仿小楷的界格，又称“九方格”。 对照书谱模型字的笔画部分练习书写。 本文中的“九宫格”专指由九个方格所产生的方形布局。 比如左图就是一个非常简单的数字九宫格。
border-image的数值参数可以用于裁剪边界图像。 正好剪出了一个九方格的模型。 所以，无论是有意还是无意，巧合还是不可避免的。 我们需要使用九方网格模型来帮助我们理解边框-图像的轮廓原理。 下图是本文非常重要的基础示意图，因为它是具有代表性的九宫格图案(27*3)*(27*3)。
这张图可以帮助我们更好的理解边框图像裁剪和绘制的原理。
border 将 border-image 分为九个部分： border-top-image、border-right-image、border-bottom-image、border-left-image、border-top-left-image、border-top-right-image 、左下边框图像、右下边框图像和中间的内容区域。 假设当前边框的长度为27像素，则上述九个部分如右图所示（放大400%）：
左图中，有四个橙色角的矩形区域称为“角边框图像”。 border-image中，角边框图像没有显示效果，不会平铺、重复或拉伸，有点类似于视觉中盲点的含义。
对面的四个橙红色区域属于显示疗效的有效区域（也是边界长度估计的剩余区域），以及上下区域，即border-top-image和border-bottom-image区域，受效果属性第一个参数——水平效果：如果重复，则该区域的图片会水平重复； 如果是圆形，则该帧中的图片将水平平铺； 如果是拉伸，则该圆形区域内的图片将被水平拉伸。 （下一部分的例子会详细演示）左右区域只有垂直方向的疗效，对应上下区域的疗效，就不多说了。
中间的区域（左侧的空白框）受到所有参数的影响，在水平和垂直维度上显示效果（平铺、拉伸等）。
边框图像轮廓原理
我是这样理解的：有两个九方格子，一个是画框图片，一个是画框本身css边框图片，九个方位是一一对应的。 框架本身的特性，使其变成了九个方格。 四个框架交错排列，与它所包围的区域一起，恰好形成了一个九个方格。 边框图片通过对图片进行裁剪来实现九个方格。 这是理解素描原理的基础。
1.调用框架图片
border-image的url属性，通过相对或绝对路径链接到图像。
2. 裁剪帧图片
border-image 的数值参数裁剪边界图像以生成九个正方形网格。
3. 裁剪图片以填充边框
将边框图像切割成9份，一一对应的放置在div边框的九个方格中，然后压缩（或拉伸）到边框的长度（border-width或border-image-width） ）。
4. 执行重复属性
填充到边框九方格子四个角的边框图像没有实现repeated属性。 上下九宫格执行水平重复属性（拉伸或平铺），左右条纹执行垂直重复属性，中间条纹执行水平和垂直重复属性。
四、border-image的一些应用
自适应圆角效果
使用图片如下：
该图像的裁剪长度为 20 像素，基本上就是该图像的圆角大小。 div的边框长度为10像素，其CSS核心样式如下：
.border_image{
-moz-border-image:url(../image/rounded_corner.png) 20/10px;
-webkit-border-image:url(../image/border.png) 20/10px;
}
结果如下：
大家可以硬点这里：圆角效果演示
多边界功效
使用图片如下：
圆角和边框的大小都是20，所以不包含CSS代码。 长治则有些不同。 最终疗效如右图所示：
大家可以硬点这里：多帧效果演示
投影效果
使用素材图片如下：
裁剪长度和帧长度都是2562。这里的投影是直接使用photoshop的投影样式生成的。 我发现对于帧投影来说有点不足。 需要自动调整，截取投影的四个边，并合并重复的区域。 您可以自己尝试一下，以达到最佳的投影效果。
疗效如右图：
你可以硬点这里：投影效果演示
标签
自适应选项卡，CSS2中实现自适应选项卡需要将背景图片做长一些，需要两层标签，而CSS3中，图片要短一些，一层标签就可以了。 例如，这是新天猫首页搜索选项卡的背景图（裁剪后的），
，如果使用border-image，只要点图的值就够了，
边框图像的裁剪尺寸和边框长度均为550； 斜边为0，其余为5个像素。 结果是：
你可以在这里用力点击：选项卡演示
