CSS3里border邊框?qū)傩宰隽舜蠓鶖U展，其中border-image這個屬性（顧名思義，就是可以給邊框添加圖片）理解和使用起來有點難度。本篇就介紹一下border-image。

先從基本的語法開始入手，例如border-image: url(border.png) 26 repeat stretch;?？梢钥闯龇殖扇齻€部分：url，剪裁位置，顯示方式

首先是url，可以使用絕對或相對路徑來加載邊框圖片，比較簡單就不啰嗦了。

其次是剪裁位置，使用TRBL原則（top-right-bottom-left），上例中26就表示上右下左都剪裁26px。你可以設(shè)成26 52，就表示上下剪裁26px，左右剪裁52px。你也可以設(shè)成10 15 20 25表示上10px，右15px，下20px，左25px位置開始剪裁。單位不指定的話，默認(rèn)是px像素，你也可以設(shè)成%百分比。比如一張50px * 50px的圖片，你設(shè)成20%，就表示上右下左都剪裁10px。

經(jīng)過上右下左剪裁后，好好一張圖片就成了9宮格的樣子。（9宮格大家都知道的吧？錘子手機界面就是9宮格）。一圖勝千言

剪裁前該圖片的尺寸是78px * 78px

經(jīng)過border-image: url(border.png) 26;剪裁后成了9宮格

9宮格分為9個部分（這不是廢話么…）：上右，上中，上左，中右，中中，中左，下右，下中，下左。經(jīng)剪裁后，9宮格最中心的部分，即中中，不會被顯示出來，會被丟棄。能顯示的就是9宮格周圍那一圈。其中四個角（圖中紅色菱形部分）就分別固定在border的四個角。即上右部分就顯示在border的右上角，同理上左，下右，下左部分就分別顯示在border的左上角，右下角，左下角。剩下4個部分上中，中右，中左，下中（圖中藍(lán)色菱形部分）的顯示效果需要結(jié)合顯示方式。

顯示方式分stretch拉伸，repeat重復(fù)，round平鋪。默認(rèn)值是stretch拉伸。你需要對9宮格的上中和下中設(shè)置水平顯示方式，對中右和中左設(shè)置垂直顯示方式。

stretch拉伸最容易理解。但round平鋪和repeat重復(fù)比較搞，有什么區(qū)別呢？round會改變9宮格部分的原始尺寸，而repeat重復(fù)會保留9宮格部分的原始尺寸，然后居中開始往兩邊無腦重復(fù)。

比如水平平鋪（9宮格里上中，下中部分平鋪），垂直拉伸（9宮格里中右，中左部分拉伸），所謂一圖勝千言：

.border-image {
    width: 120px;
    height: 80px;
    border: 26px solid;
    border-image: url(border.png) 26 round stretch;
}

<div class="border-image"></div>

垂直stretch拉伸效果一目了然。水平round平鋪會改變9宮格部分的原始尺寸，例中div長度是120px，9宮格裁剪后一個藍(lán)色菱形是26px，因此可以顯示4.6個藍(lán)色菱形，四舍五入會顯示5個藍(lán)色菱形，每個菱形被縮小成了24px。

那我們試試將水平改成repeat重復(fù)，看看有什么差別，所謂一圖勝千言：

.border-image {
    width: 120px;
    height: 80px;
    border: 26px solid;
    border-image: url(border.png) 26 repeat stretch;
}

<div class="border-image"></div>

repeat重復(fù)會保留9宮格部分的原始尺寸（每個藍(lán)色菱形仍舊26px），然后居中開始往兩邊無腦重復(fù)，最終顯示4.6個藍(lán)色菱形

水平和垂直如果是同樣值，不必重復(fù)敲代碼：border-image: url(border.png) 26 round;即可。等價于border-image: url(border.png) 26 round round;。因為顯示方式的默認(rèn)值是stretch拉伸。所以border-image: url(border.png) 26;等價于border-image: url(border.png) 26 stretch stretch;

用法介紹完了，有什么用呢？這就得發(fā)揮想象力了。比如一些漂亮的頁面效果。原始png圖：

用border-image給div的邊框加上該圖片后，該div的效果：

最后根據(jù)Can I Use顯示該屬性在IE上有兼容性問題，只有IE11才開始支持。（對于IE，或曰對于微軟我早已無力吐槽）

其他瀏覽器最新版，直接用border-image沒問題。但舊版需要加上前綴，參考MDN通常這樣寫：

-moz-border-image:url("border.png") 30 30 repeat; /* Old Firefox */ 
-webkit-border-image:url("border.png") 30 30 repeat; /* Safari */ 
-o-border-image:url("border.png") 30 30 repeat; /* Opera */ 
border-image:url("border.png") 30 30 repeat;