边框图片

原理示意图：

九宫格切图法,保留四个角边框样式,拉伸平铺或环绕方式设置图片四条边.以达到边框样式相同大小可以改变的效果

组合写法：


border-image: url("images/border.jpg") 167/20px round;

拆分写法：

border-image-source: url("images/border.jpg");  /*边框图片资源地址*/  
border-image-slice: 167 167 167 167;  /* 裁剪尺寸（上 右 下 左）单位默认px，可使用百分百 */
border-image-width: 20px;  /*边框图片的宽度，默认边框的宽度。*/
border-image-repeat: round;  /*平铺方式*/

平铺方式：

stretch 拉伸（默认）
repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
round 环绕，是完整的使用切割后的图片进行平铺。

多个盒子边框样式相同可以将边框样式封装成一个类.
边框盒子包含内容盒子,子绝父相,根据实际边框宽度调整内容盒子的定位值.

例:
在这里插入图片描述
封装成公共类


/* 公共面板样式  */
.panel {position: relative;border: 15px solid transparent;border-width: .6375rem .475rem .25rem 1.65rem;border-image-source: url(../images/border.png);border-image-slice: 51 38 20 132;margin-bottom: .25rem;
}
.inner {position: absolute;top: -0.6375rem;left: -1.65rem;right: -0.475rem;bottom: -0.25rem;padding: .3rem .45rem;}