使用CSS3 border-image 属性，你可以在元素的周围设置图片边框。
一、什么是边框图片
为了实现丰富多彩的边框效果，在css3中，新增了 border-image 属性，这个新增属性允许指定一副图像作为元素的边框。
边框图片的使用场景
盒子大小不一，但是边框样式相同，此时就需要边框图片来完成，不是背景图片，而是用边框图片来实现。
二、浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。
三、CSS3 border-image 属性
CSS3 border-image 属性允许您指定要用来代替元素周围的正常边界的图像。属性有三个部分:
-
作为边框的图片。
-
在哪里分割图像。
-
确定中间部分应重复或延伸。
以下面的图像(叫做 "border.png")为例：
原理分析：
border-image 性将图像分割成九个部分，就像一个井字游戏板。然后将角放在拐角处，中间部分按指定的顺序重复或拉伸。
注意:
让border-image 正常工作, 元素也需要设置边框属性!
边框图片的切图原理
最主要是把四个角切出去，利用井字型来把四个角切出去，一定要保留四个角的完整性，顺序是：上 右 下 左；
边框图片语法规范
border-image-source:用在边框的图片的路径（哪一个图片？）；
border-image-slice:图片边框内向偏移（裁剪的尺寸，一定不加单位，上右下左的顺序）；
border-image-width:图片边框的宽度（需要加单位 这里不是边框的宽度而是边框图片的宽度），这个默认属性是border的宽度，但是有区别，这个是边框图片的宽度不会挤压文字；
border-image-repeat:图片边框是否应该平铺（repeat）、铺满（round）或者拉伸（stretch）默认是拉伸。
注意: border-image 属性是border-image-source, border-image-slice, border-image-width, border-image-outset 和 border-image-repeat 的缩写.
组合写法：
border-image: url("images/border.jpg") 167/20px round;
拆分写法：
border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;
解释：
-
边框图片资源地址
-
裁剪尺寸（上 右 下 左）单位默认px，可使用百分百。
-
边框图片的宽度，默认边框的宽度。
-
平铺方式：
-
stretch 拉伸（默认）
-
repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
-
round 环绕，是完整的使用切割后的图片进行平铺。
-
DEMO代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框图片</title>
<style>
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
width: 350px;
height: 160px;
border: 20px solid #ccc;
margin-top: 20px;
}
li:nth-child(1){
/*border-image: url("images/border.jpg") 167/20px round;*/
border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
/*环绕 是完整的使用切割后的图片进行平铺*/
border-image-repeat: round;
}
li:nth-child(2){
/*平铺 从边框的中心向两侧开始平铺 会出现不完整的图片*/
border-image: url("images/border.jpg") 167/20px repeat;
}
li:nth-child(3){
/*默认的平铺方式*/
border-image: url("images/border.jpg") 167/20px stretch;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>