边框图片_九宫格切图

边框图片

原理示意图：

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

组合写法：

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;
   
}