CSS3 border-image由應用到原理

指定作爲div元素周圍邊框的圖像：

#borderimg { 
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

嘗試一下 »

語法

border-image: source slice width outset repeat|initial|inherit;

值	描述
border-image-source	用於指定要用於繪製邊框的圖像的位置
border-image-slice	圖像剪裁位置
border-image-width	圖像邊界的寬度
border-image-outset	用於指定在邊框外部繪製 border-image-area 的量
border-image-repeat	用於設置圖像邊界是否應重複（repeat）、拉伸（stretch）或鋪滿（round）。

實際渲染規則

通過裁切屬性值，將邊框背景圖切出了“九宮格”的模型，那這張背景圖怎麼對應地貼在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;

效果如下