CSS 边框图片

border-image-source  用在边框的图片路径

border-image-slice   图片的边框向内偏移（裁剪的尺寸，一定不加单位，上右下左顺序）

border-image-width  图片边框的宽度(需要加单位)(不是边框的宽度，是边框图片的宽度)

border-image-repeat  图片边框是否平铺(repeat)，铺满(round)或拉伸(stretch)，默认拉伸

 

 

例子

border-image-source :url(images/border.png);

border-image-slice :30 30 30 30;

border-image-width :30px;

border-image-repeat :round;

 

因为边框图片切割的原因，在容器里面用的话，内容会在切割的中间，就是9宫格的中间显示。

解决办法：我们需要在里面再加一个容器，然后设置觉得定位拉伸，外容器相对定位。下面的是内容器的CSS

position:absolute;
top:-0.6rem;//自己调节
left:-1.6rem;//自己调节
right:-0.5rem;//自己调节
bottom:-0.5rem;//自己调节
background-color:red;
padding:0.3rem 0.4rem;