【CSS3】为边框应用图片 border-image
写在前面：在我刚开始学css3的时候，查阅了所有有关 border-image的文档，我都没有明白是怎么回事，因为我疑惑的地方这些文档都没有讲解或者没有讲解清楚，直到有一天我遇到Ta，才彻底明白了这个属性。
border-image这个复合属性包含五个属性：border-image-source（图片来源）,border-image-slice（分割方法）,border-image-width（边框宽度）,border-image-outset（扩展方式）,border-image-repeat（重复方式）。
（1）如果没有border-image这个属性，传统方法该如何设置边框呢？
程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:300px;
height:300px;
background:url(./shuaige.jpg) center no-repeat red ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
运行结果：
图1-1
如果不居中（没有center）的话，效果是：
图1-2
原图：
图1-3
注：图1-1红色部分相当于边框（因为原图的大小是280*280，现在div的大小是300*300，多出来的部分就相当于边框）。加上“background-image-source:none”效果一样。
（2）border-image-repeat：stretch（默认值 ）
需要达到的目标效果如图2-0：
图2-0
图2-1
图2-1是边框图片，大小为81*81。
程序：
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div{
width:300px;
height:300px;
background:url(./shuaige.jpg) center no-repeat ;
border-image-source:url(./border.png);/*边框图片属性*/
border-image-width:27px;/*边框图片宽度属性*/
border-image-slice:27;/*边框图片切割属性*/
border-image-outset:0px;/*边框图片扩展属性*/
border-image-repeat:stretch;/*边框图片重复属性*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
运行结果：
图2-2
这里需要说明的问题有很多。
说明1：首先，border-image-slice:27将图片分割成9份，如图2-3所示，（border-image-slice的用法非常简单，切四刀，分别距离边缘27px），然后对应图2-4，把图2-4中的1部分填充到图2-3的1部分，2部分对应到2部分，以此类推，不过5部分不会填充，它是内容，即图片，最终得到图2-2。
图2-3 图2-4
（3）border-image-repeat：repeat
需要达到的最终效果是：
图3-1
需要注意的是：1和第一个2之间有个小三角。
程序：只需要把上面的border-image-repeat：stretch替换成border-image-repeat：repeat。
运行结果：
图3-2
需要说明的是：1、3、7和9不会有任何变化。2、4、6和8重复，但是形状大小都不变，所以可能会出现图3-2中的小三角。
（4）border-image-repeat：round
需要达到的理想效果是：
图4-1
仔细看可以发现：图4-1和图3-1的区别在于图3-1有小三角，而图4-1没有小三角。
程序：只要把border-image-repeat属性设置为round即可。
运行结果：
图4-2
对比可以发现：图4-2的1和2之间没有小三角，2、4、6和8有拉伸过。
（5）border-image-slice：27 fill
如果不设置fill的话，第五块不会被边框的第五部分填充，而是内容，一般为图片，如果使用fill，可以显示第五块切割的边框部分。
目标效果：
图5-1
程序：只要在border-image-slice属性值的后面加上fill即可（例如：border-image-slice:27 fill）。
运行结果：
图5-2
（6）border-image-slice:54
目标效果：
图6-1
程序：只要设置属性border-image-slice:54即可。
运行结果：
图6-2
需要说明的是：图6-2的左上角是1、2、4、5，因为这一块是由上切和左切决定的，所以切割图如图6-3，不过在图6-2中的宽度是27px。
图6-3
同理，图6-2中的右上角、左下角和右下角的切割方式：
图6-4 图6-5 图6-6
（7）border-image-outset:27px
目标效果：
图7-1
程序：只要设置border-image-outset:27px 即可
运行结果：
图7-2
需要说明的是：div的大小并没有变化，边框向外移动。