CSS3 border-image 完全明白

border-image用於給border（邊框）貼上背景圖像

相似於CSS中的background（背景）屬性。 例如：background:url(xx.jpg) 27px no-repeat;指的是圖片(url(xx.jpg))，位置(27px)，重複性(no-repeat)。

border-image與此相似，border-image包括圖片，剪裁位置（與background位置同樣，也是數值，也支持百分值），重複性。
例如：border-image:url(border.png) 27 repeat; 指的就是圖片(url(border.png))，剪裁位置(27)，重複方式(repeat)。

下面咱們將border-image的複合寫法分解描述，

border-image的主要參數就是上面提到的三個：圖片，剪裁位置，重複性。
其實還有另外兩個，文章最後面再講。更好理解

一、圖片(border-image-source)

• border-image的背景圖使用url()調用，圖片能夠是相對路徑或是絕對路徑，也能夠不使用圖片，即border-image:none;

二、圖片剪裁位置(border-image-slice)

• 沒有單位，默認單位就是像素(px)。例如：border-image:url(border.png) 27 repeat;這裏的27專指27px。

---

• 支持百分比值，百分比值大小是相對於邊框圖片的大小，假設邊框圖片大小爲400px*300px，則20%的實際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小。

---

• 剪裁特性。相似於CSS中的clip屬性。其有1~4個參數，表明上右下左四個方位的剪裁，符合CSS廣泛的方位規則（與margin，padding等或border-width一致），舉個簡單的例子，前面提到，支持百分比寬度，因此這裏「30% 35% 40% 30%」的示意能夠用下圖表示：
  

距離圖片上部30%的地方，距離右邊35%，距離底部40%，左邊30%的地方各剪裁一下。也就是對圖片進行了「四刀切」，造成了九個分離的區域，這就是九宮格，這是下面深刻講解border-image的基礎。

三、重複性(border-image-repeat)

取值爲repeat（重複）只是其中之一，其他兩個是round（平鋪）和stretch（拉伸）。其中，stretch是默認值。

參數0~2個，0則使用默認值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同於border-image:url(border.png) 30% 40% stretch stretch;；1則表示水平方向及垂直方向均使用此參數；2個參數的話則第一個參數表水平方向，第二個參數表示垂直方向。例如：border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平鋪），垂直方向repeat（重複）。

關於round 和repeat 的區別。
round會湊整填充（進行了適度的拉伸）。repeat不進行拉伸，不湊整。 具體效果看文章後邊的例子。

四、實際渲染規則

經過裁切屬性值，將邊框背景圖切出了「九宮格」的模型，那這張背景圖怎麼對應地貼在div的邊框上呢？

<————————>

• 如圖 在border-image中的橙紅色的四個邊角只會呆在border的四個角,而且水平和垂直方向均被拉伸來填充border的四個角。
• 如圖 上下區域即border-top-image和border-bottom-image受到第一個參數——水平方向效果影響：若是爲repeat，則此區域被水平重複(round水平平鋪，stretch水平拉伸)來填充對應的上下border【該區域在垂直方向上首先會按所對應的border-image-width的值等比縮放，而後再按參數設置在邊框水平方向上進行重複或平鋪或拉伸】
• 左右區域border-left-image和border-right-image 的做用效果亦然【該區域在水平方向上首先會按所對應的border-image-width的值等比縮放，而後再按參數設置在邊框垂直方向上進行重複或平鋪或拉伸】

---

---

---

咱們用下圖(27×3)px *(27×3)pxpng 作實驗，我給不一樣部位加了一個序號作標誌，便於觀察。

// 加一個藍色背景的父級，便於咱們分析效果。
    .border_image {
        width: 400px;
        height: 115px;
        border: 3em double orange;
        -webkit-border-image: url(border.png) 27 round;
        border-image: url(border.png) 27 round;
    }
    .box {
        background: blue;
    }

    <div class="box">
        <div class="border_image"></div>
    </div>

效果以下

---

//去掉重複屬性，即默認都爲stretch
   border-image: url(border.png) 27;

效果以下

---

//使用repeat
  border-image: url(border.png) 27 repeat;

效果以下

---

---

//邊框寬度改變
    border-image: url(border.png) 27 repeat stretch;
    border-width: 3rem 1rem;

效果以下

---

---

五、(邊框背景寬度)border-image-width

這個屬性默認是邊框的寬度，用來限制相應區域背景圖的範圍，
首先相應背景區域的圖像會根據這個屬性值進行縮放。而後再重複或平鋪或拉伸。

在複合寫法中應該位於 slice屬性 和repeat屬性中間 用「/」間隔
如：border-image:url(border.png) 27 / 6rem / repeat;

語法：border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}

length 帶 px, em, in … 單位的尺寸值
percentage 百分比
number 不帶單位的數字；它表示 border-width 的倍數
auto 使用 auto， border-image-width 將會使用 border-image-slice 的值

border: 3em double orange;
    border-image: url(border.png) 27 round;
    border-image-width: 6rem;

效果以下
（白框爲border）

border-image-width: 1.5rem;

效果以下
（白框爲border）

---

border: 3em double orange;
    border-image: url(border.png) 27 round;
    border-image-width: 6rem 1.5rem;

效果以下
（白框爲border）

六、（邊框背景擴散）border-image-outset

語法：border-image-outset: [ <length> | <number> ]{1,4}
至關於把原來的貼圖位置向外延伸。不能爲負值，試一下就知道。

在複合寫法中應該位於 border-image-width 後面，用「/」間隔
如：border-image:url(border.png) 27 / 6rem / 1.5rem /repeat;
向外延伸1.5rem再貼圖。。

border: 3em double orange;
    border-image: url(border.png) 27 round;
    border-image-width: 1.5rem;
    border-image-outset: 1.5rem;

效果以下：
（白框爲border）

ps 部分資料來源網絡

親們，看懂沒？不懂請留言，幫你解答。。保會。。