CSS3里border邊框?qū)傩宰隽舜蠓鶖U(kuò)展，其中border-image這個(gè)屬性（顧名思義，就是可以給邊框添加圖片）理解和使用起來有點(diǎn)難度鸟廓。本篇就介紹一下border-image茅主。
先從基本的語法開始入手，例如border-image: url(border.png) 26 repeat stretch;邀窃。可以看出分成三個(gè)部分：url，剪裁位置瞬捕，顯示方式
首先是url鞍历，可以使用絕對(duì)或相對(duì)路徑來加載邊框圖片，比較簡單就不啰嗦了肪虎。
其次是剪裁位置劣砍，使用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宮格大家都知道的吧牍汹？錘子手機(jī)界面就是9宮格）。一圖勝千言
剪裁前該圖片的尺寸是78px * 78px
經(jīng)過border-image: url(border.png) 26;剪裁后成了9宮格
9宮格分為9個(gè)部分（這不是廢話么…）：上右柬泽，上中慎菲，上左，中右锨并，中中露该，中左，下右第煮，下中解幼，下左。經(jīng)剪裁后包警，9宮格最中心的部分撵摆，即中中，不會(huì)被顯示出來害晦，會(huì)被丟棄特铝。能顯示的就是9宮格周圍那一圈。其中四個(gè)角（圖中紅色菱形部分）就分別固定在border的四個(gè)角。即上右部分就顯示在border的右上角鲫剿，同理上左鳄逾，下右，下左部分就分別顯示在border的左上角灵莲，右下角雕凹，左下角。剩下4個(gè)部分上中笆呆，中右请琳，中左粱挡，下中（圖中藍(lán)色菱形部分）的顯示效果需要結(jié)合顯示方式赠幕。
顯示方式分stretch拉伸，repeat重復(fù)询筏，round平鋪榕堰。默認(rèn)值是stretch拉伸。你需要對(duì)9宮格的上中和下中設(shè)置水平顯示方式嫌套，對(duì)中右和中左設(shè)置垂直顯示方式逆屡。
stretch拉伸最容易理解。但round平鋪和repeat重復(fù)比較搞踱讨，有什么區(qū)別呢魏蔗？round會(huì)改變9宮格部分的原始尺寸，而repeat重復(fù)會(huì)保留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平鋪會(huì)改變9宮格部分的原始尺寸榄审，例中div長度是120px，9宮格裁剪后一個(gè)藍(lán)色菱形是26px杆麸，因此可以顯示4.6個(gè)藍(lán)色菱形搁进，四舍五入會(huì)顯示5個(gè)藍(lán)色菱形，每個(gè)菱形被縮小成了24px昔头。
那我們?cè)囋噷⑺礁某蓃epeat重復(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ù)會(huì)保留9宮格部分的原始尺寸（每個(gè)藍(lán)色菱形仍舊26px）减细，然后居中開始往兩邊無腦重復(fù)匆瓜，最終顯示4.6個(gè)藍(lán)色菱形
水平和垂直如果是同樣值，不必重復(fù)敲代碼：border-image: url(border.png) 26 round;即可。等價(jià)于border-image: url(border.png) 26 round round;驮吱。因?yàn)轱@示方式的默認(rèn)值是stretch拉伸茧妒。所以border-image: url(border.png) 26;等價(jià)于border-image: url(border.png) 26 stretch stretch;
用法介紹完了，有什么用呢左冬？這就得發(fā)揮想象力了桐筏。比如一些漂亮的頁面效果。原始png圖：
用border-image給div的邊框加上該圖片后拇砰，該div的效果：
最后根據(jù)Can I Use顯示該屬性在IE上有兼容性問題梅忌，只有IE11才開始支持。（對(duì)于IE除破，或曰對(duì)于微軟我早已無力吐槽）
其他瀏覽器最新版牧氮，直接用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;
