border-image使用

效果图

开发时遇到要给内容新增一个图片边框，本来是可以用background的，但为了充分利用减少图片的大小，就采用了border-image的特性。
border-image可能小伙伴们用的比较少，下面我来讲讲他的一些特性。
属性：

1.border-image-source:url(”) 图片的路径
2. border-image-slice 图片的裁切方式，4个参数可以是像素值，也可以是百分比。顺序为上，右，下，左。
3. border-image-width 边框的宽度， 顺序为上，右，下，左。
4. border-image-outset 边框偏移基准位置的像素值，默认为0，
5.border-image-repeat 裁切后图片的填充方式，可选stretch/repeat/round,分别为拉伸，重复，平铺，默认值为stretch,顺序为：上下，左右。

接下来看看我的实现
首先准备一个图片。（图片透明的）

---

.container {
            width: 80%;
            height: 500px;
            margin: 100px auto;
            box-sizing: border-box;
            border: 18px solid #4a0990;
            border-image:url("border_2.png") 18 18 repeat;

        }

注意：图片四个角不会重复，四条边各自重复。
更多了解参考以下资料：
1.关于border-image属性
2.深入浅析css3 border-image边框图像详解
3.border-image属性分析
4.css3 border-image及连续的图像边框