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: %;
            height: px;
            margin: px auto;
            box-sizing: border-box;
            border: px solid #4a0990;
            border-image:url("border_2.png")   repeat;

        }
           

注意：圖檔四個角不會重複，四條邊各自重複。

更多了解參考以下資料：

1.關于border-image屬性

2.深入淺析css3 border-image邊框圖像詳解

3.border-image屬性分析

4.css3 border-image及連續的圖像邊框