border-image 属性允许在元素的边框上绘制图像。
语法：
/* border-image: image-source image-height image-width image-repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;
demo:
1.原图：
用这张图切割作为边框背景，不用工具测量都知道，只需要切割图片宽度/高度三分之一即可。
1.切割示意图
1.效果图：
.box1{display: none;width: 200px;height: 200px;border: 20px solid rgb(116, 136, 76);border-image: url(img/border01.jpg) 167/20px round;/* 在内容变化的容器可以使用，边框自动填充 */}
☆－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－☆
2.原图：
2.切割示意图
2.效果图
.box2{margin-top: 20px;width: 300px;height: 200px;border: 20px solid yellowgreen;border-image-source: url(img/border2.jpg);border-image-slice: 43 42 38 41;border-image-width: 20px;border-image-repeat: round;}
☆－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－☆
3.原图
3.切割示意图
3.效果图
.box3{margin-top: 20px;width: 200px;height: 200px;background-color: #f6f6f6;border: 20px solid yellowgreen;border-image-source: url(img/border4.jpg);border-image-slice: 80 72 75 72;border-image-width: 20px;border-image-repeat: round;}
☆－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－:+:－☆
以上三种的border-image-repeat都是round。下面对比一下round/repeat/stretch的区别。
round 字面意思环绕 完整的自适应（等比缩放）平铺在边框内repeat 字面意思重复 从边框的中间向两侧平铺 自适应平铺但是不是完整的stretch 字面意思拉长 拉伸显示在边框内容 这样的效果是变形的以第一张图片作为边框背景为例：
round:
repeat:
stretch:
