CSS3中的border-image是非常有用的，但是有点不太好理解，因为 border-image的实际功能是它的字面意思有点不太统一。从字面上来看border-image只是针对边框有效，但是在实际运用中非边框区域也可以进行添加。我一开始看到这个的时候不太理解，尤其是在border-width的设置，我看到其他文章中直接利用border-width加上border-image就可以实现，但是后面我发现"border-width" 属性如果单独使用的话是不会起作用的，首先使用 "border-style" 属性来设置边框，这样才可以实现真正的border-image的效果。
border-image的作用可以说很广，可以制作不同的按钮形式、边框、圆角和阴影等效果，更好的使用这个属性，可以达到意想不到的效果。那么这个属性的兼容性如何呢？从图中，我们可以看到，现在IE11+，FireFox以及Chrome浏览器均已支持border-image，并且目前也就Android4.3及其以下版本需要-webkit-私有前缀，可以说border-image的时代即将到来。
一、border-image的属性说明
border-image的参数有三个：图片，剪裁位置，重复性。
1、图片(border-image-source)
与CSS2中background-image属性一样，border-image的背景图使用url()调用，图片可以是相对路径或是绝对路径，也可以不使用图片，即border-image:none;
2、图片剪裁位置(border-image-slice)
此参数特点比较鲜明：
1）没有单位，专指像素。这类似于flash的as脚本，舞台高宽，影片剪辑大小，位移直接就是一个数值，没有单位，因为默认单位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;这里的27专指27像素。
2）支持百分比值，百分比值大小事相对于边框图片而言，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。
3）剪裁特性。如果您对CSS中clip属性(clip:rect(auto, auto, auto, auto))比较了解，则这里理解就会轻松些。clip可以说是CSS中一个明目张胆的剪裁属性，而此处的属性虽然表意上不是剪裁，但是在border-image效果的实现上来说，就好像是个剪裁工具，把边框图片四分五裂，再重新安置，变形。其有1~4个参数，其方位规则符合CSS普遍的方位规则（与margin，padding等或border-width一致），上右下左顺时针，再赋予剪裁的含义，举个简单的例子，前面提到，支持百分比宽度，所以这里“30% 35% 40% 30%的”示意可以用下图表示：
具体说明：离图片上部30%的地方剪裁一下，在右边35%的地方剪裁一下，在离底部40%的地方裁剪一下，在距左边30%的地方也剪裁一下。于是总共对图片进行了“四刀切”，形成了九个分离的区域，这就是九宫格。
3、重复性(border-image-repeat)
这里的重复性有别于background的背景重复，差别较大。background图片就是重复，不重复，水平重复，垂直重复，总之就是围绕repeat（重复）这个词打转。而对于border-image，可谓是三足鼎立，repeat（重复）只是其中之一，其余两个是round（平铺）和stretch（拉伸）。其中，stretch是默认值。他只接受两个（或一个）参数值，第一个表示水平方向，第二个表示垂直方向；当取值为一个值时，表示水平和垂直方向的排列方式相同。同时其默认值是stretch，如果你省略不取值时，那么水平和垂直方向都是以stretch排列。
其中四个角的部分是不会拉伸和重复的，总是保持原样,水平的边进行水平变换，垂直的边进行垂直方向的变换，中间的区域既要进行进行水平变换又要进行垂直变换。图上图所示，四个角的部分不会改变，而是水平方向和垂直方向的才会进行变换。
二、深入理解border-image
border-image的数值参数其实是用来剪裁边框图片的，正好切出了个九宫格的模型，我们需要用到九宫格模型帮助我们理解border-image的绘制原理。边框将border-image分成了九部分：border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image以及中间的内容区域。
补充：border-image绘制原理简述
共存在两个九宫格，一个是边框图片，还有一个就是边框本身，九个方位关系一一对应。边框本身的特性让其变成了一个九宫格，四条边框交错，加上其围住的区域，正好形成一个九宫格。边框图片则是通过图片剪裁实现了九宫格。这是理解绘制原理的基础。
1、调用边框图片
border-image的url属性，通过相对或绝对路径链接图片。
2、边框图片的剪裁
border-image的数值参数剪裁边框图片，形成九宫格。
3、剪裁图片填充边框
边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。
4、执行重复属性
被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。
5、完成绘制，实现效果
三、案例
1）多边框效果
左边的图是制作的时候所使用的图，右边的图纸利用这个属性做出来的效果。这样就可以制作一个多边框的效果。实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:100px;
height:24px;
border:12px solid #fff;
border-image: url("images/border2.png") 12 stretch;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
margin:50px auto;
width:200px;
height:100px;
border:27px solid #fff;
border-image:url(images/border.png) 27 round;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
参考：
CSS3 border-image详解、应用及jQuery插件
6047
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
