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及連續的圖像邊框