前端開(kāi)發(fā)之css3：border-image邊框圖像詳解

hello，大家好，我叫小黑，也叫xiaoho，目前喜歡并從事寫(xiě)頁(yè)面。因?yàn)椴幌矚g在那些類(lèi)似BBS型的論壇上發(fā)帖，所以之前在html-js上發(fā)表幾篇戳文，現(xiàn)在申請(qǐng)了前端觀察打字員，在這里謝謝神飛童鞋，雖然我不懂他是干嘛的~不過(guò)為什么選擇在這里發(fā)表文章的緣由就是下面這句話(huà)：

向來(lái)中國(guó)的前端開(kāi)發(fā)領(lǐng)域，就像一盤(pán)散沙一樣，每個(gè)人每個(gè)站都各自為營(yíng)，高手就像就像天空的星星一樣多，但是他們的成就卻很少?gòu)V為傳播，初學(xué)者卻苦于在大海一樣的設(shè)計(jì)中尋找自己的參考。

我非圣人，我只是把我自己所學(xué)所想的表達(dá)出來(lái)，畢竟個(gè)人想法有限，假如有悖論或者冒犯之處，還請(qǐng)拍磚，大家一起在爭(zhēng)論中提高。還有，也許你們可能也會(huì)奇怪，為什么網(wǎng)上有這么一大把的學(xué)習(xí)的文章，類(lèi)似的文章還要自己寫(xiě)出來(lái)，我的個(gè)人想法是：只有自己親自去實(shí)踐過(guò)才有發(fā)言權(quán)。
那么問(wèn)題來(lái)了：怎么對(duì)我的言語(yǔ)進(jìn)行反駁呢？在評(píng)論中猛戳！

前言

對(duì)于這個(gè)border-image屬性已經(jīng)不是什么新奇的事情了，也是一個(gè)老生長(zhǎng)談的話(huà)題。這是屬性從很多年前已經(jīng)出現(xiàn)了，但一直形單影只的，似乎不被看好，但是假如你對(duì)此深入研究之，想必其用處還是多多，不過(guò)很可惜到目前為止對(duì)于瀏覽器支持還不比其他css3屬性多，特別是IE，只有IE11以上才支持，詳情請(qǐng)移步 border-image兼容性。不過(guò)很好，對(duì)于純正的現(xiàn)代瀏覽器和移動(dòng)瀏覽器支持度還是非常牛逼哄哄的，所以今天就來(lái)詳解一下這個(gè)屬性的各個(gè)值。

border-image摘要

其實(shí)我[border-image屬性]是用來(lái)給元素邊框添加背景圖像，在某些時(shí)候，利用這個(gè) border-image 可以輕松繪制一些比較復(fù)雜的小部件。并且我是 border-image-source border-image-slice border-image-widthborder-image-outsetborder-image-repeat 的簡(jiǎn)寫(xiě)值。只不過(guò)為了方便簡(jiǎn)寫(xiě)，畢竟你懂得，我們家族border-* 都是有簡(jiǎn)寫(xiě)值，假如作為新生兒沒(méi)有，那看的人估計(jì)都醉了。

哦，對(duì)了，忘記跟你說(shuō)了，我的作用就是用來(lái)代替 border-style 值的。值得注意的是假如 border-image 值是none的話(huà)，那么背景圖像將不會(huì)顯示，同時(shí)， 將會(huì)顯示border-style的值。 那么我的詳細(xì)簡(jiǎn)寫(xiě)值如下所示：

所以，我的完整寫(xiě)法是

  .border-image-all{ border:27px solid #000; border-image:url(http://likemindfilms.com/UploadFiles/2014-10/2/201410191273754705.png) 27 27 27 27 fill/27 27 27 27/27px 27px 27px 27px repeat;}
  

如你所見(jiàn)，這正是我的一個(gè)簡(jiǎn)寫(xiě)值。請(qǐng)不要頭暈哦，雖然是一長(zhǎng)串的各種英文單詞，但是你對(duì)我恐怕也不陌生噠，想想css屬性當(dāng)中有哪些是跟圖片相關(guān)的，反正我是想到了 background 屬性值了。css當(dāng)中引入圖像的屬性的屬性值不外乎有：圖片地址background-image、圖片重復(fù)background-repeat、圖片平鋪方式background-attachment等。因此對(duì)于邊框圖像也是大同小異滴啦。下面我們就一一分析這些單獨(dú)的屬性值。

border-image有六大屬性值，分別是：圖片地址border-image-source、圖片切片border-image-slice、圖片寬度border-image-width、圖片外凸border-image-outset、圖片重復(fù)border-image-repeat

圖片地址border-image-source

我叫引入圖片地址屬性，我這個(gè)屬性的屬性值是比較好理解滴，因?yàn)榫椭挥袃蓚€(gè)屬性值嘛，初始值是none，假如設(shè)置了none，那么我們的盒子邊框就會(huì)應(yīng)用 border-style 的值；假如你想要設(shè)置一個(gè)外部鏈接地址的圖片進(jìn)來(lái)那么代碼可以直接寫(xiě)到：

.border-image{ 
border:20px solid #000; 
border-image-source:url(border.png); //目測(cè)我會(huì)長(zhǎng)得很丑比 ~ .~，不信你試試
}

圖片切片border-image-slice

我叫border-image-slice，指定邊框圖像頂部、右側(cè)、底部、左側(cè)內(nèi)偏移量。我的沒(méi)有具體的單位值，比如像px、em統(tǒng)統(tǒng)不能應(yīng)用在我身上，你只要給我一個(gè)單純的數(shù)字即可，當(dāng)然了你也可以按照百分比來(lái)給我設(shè)置滴啦。我的作用就是把邊框圖像切成9個(gè)區(qū)域：4個(gè)角、4邊區(qū)域和一個(gè)中間部位，前輩們都謙虛稱(chēng)作9宮格，但是我悄悄跟你說(shuō)哦，假如說(shuō)不應(yīng)用fill這個(gè)可選屬性值的話(huà)，那么中間第九塊格子被當(dāng)做透明不見(jiàn)，相當(dāng)于中間那塊被哪條狗吃了呢！

第一個(gè)值為number，即純數(shù)字作為單位計(jì)量，如1,2,3…；第二個(gè)值為percentage，即百分比作為單位；{1,4}表示前面的數(shù)字最少出現(xiàn)一次，最多出現(xiàn)4次，如 border-image-slice:27 border-image-slice:27 27 border-image-slice:27 27 27 border-image-slice:27 27 27 27 都是可以的，這個(gè)和margin的值大同小異，假如你還不懂這些縮寫(xiě)值具體代表什么，那么你不妨去看看前段時(shí)間寫(xiě)的一篇關(guān)于margin的簡(jiǎn)寫(xiě)值，fill為可選屬性值，假如指定，那么中間第九塊不是透明塊，假如不指定，那么為透明圖片處理。

你們一定是很好奇，我具體是怎么工作機(jī)制的呢，就算csser指定了幾個(gè)數(shù)字上去，但是壓根就不懂他是怎么工作的，那就呵呵啦。所以下面帶來(lái)詳解：

圖片用了w3c指定專(zhuān)用產(chǎn)品~一個(gè)81px的正方形位圖，9個(gè)菱形圖案，每個(gè)菱形圖案為27*27px
 
左上角、右上角、右下角、左下角為4個(gè)橙色菱形，頂部區(qū)域、右側(cè)區(qū)域、底部區(qū)域、左側(cè)區(qū)域?yàn)?個(gè)土黃菱形，中間塊（賤稱(chēng)第九區(qū)）為透明塊。剛剛也說(shuō)過(guò)了，這個(gè)border-image-slice就是一個(gè)切片的作用，把圖像直接切開(kāi)，中間不留痕跡，假如給定這個(gè)屬性值：border-image-slice:27 27 27 27 那么它代表的意思是距離頂部?jī)?nèi)偏移區(qū)域27px處橫切一刀

接著距離右側(cè)內(nèi)偏移區(qū)域27px豎切一刀

緊接著距離底部?jī)?nèi)偏移區(qū)域27px橫切一刀

接著距離左側(cè)內(nèi)偏移區(qū)域27px豎切一刀

那么給定圖像切片border-image-slice:27 27 27 27完整動(dòng)態(tài)圖如下：

這幾刀下來(lái)把我分成了9個(gè)部分，因此我被9宮格也就此由來(lái)

所以被切割的部位都分布在盒子邊框這9個(gè)地方，如上所示。對(duì)應(yīng)的，被分隔的圖像只能在邊框?qū)挾龋╞order-width）內(nèi)活動(dòng)，什么意思呢，比如盒子邊框?yàn)?code>border-width:54px 分割圖片為border-image-slice:27，因?yàn)閳D像4個(gè)頂角的寬度和高度都只有27px，但是盒子的邊框是54px，因此圖片就要被水平方向和垂直方向拉伸到切好跟盒子邊框?qū)挾鹊韧?，?7px的圖像拉伸到54px停止，再往前就不行了！這點(diǎn)上，跟 鑫哥 的解釋有點(diǎn)不太一樣，因?yàn)樗X(jué)得這個(gè)是視覺(jué)中盲點(diǎn)，被分隔的頂角圖像只是分配到邊框的4個(gè)頂角，不會(huì)平鋪，不會(huì)重復(fù)、不會(huì)拉伸（這點(diǎn)跟我說(shuō)得不符合），引用原文如下：

橙紅色的四個(gè)邊角的菱形區(qū)域稱(chēng)為“角邊框圖片”，在border-image中，角邊框圖片是沒(méi)有任何展示效果的，不會(huì)平鋪，不會(huì)重復(fù)，也不會(huì)拉伸，有點(diǎn)類(lèi)似于視覺(jué)中盲點(diǎn)的意思。

為了證明我的觀點(diǎn)，我用了兩個(gè)demo來(lái)展示一下，

demo1：當(dāng)盒子邊框?qū)挾缺缺磺袌D片邊框大的時(shí)候，如下代碼

.border-image{ 
            border:54px solid #000;  //盒子邊框?yàn)?4px
            border-image-source:url(border.png); 
            border-image-slice:27 27 27 27; //邊框圖片被切成9個(gè)區(qū)域，其中4個(gè)頂角的大小為 27*27px
}

效果：

對(duì)此我的理解是如下步驟：

詳情請(qǐng)點(diǎn)擊：slice切片的值比邊框?qū)挾却?/a>

.border-image{ 
            border:14px solid #000;  //盒子邊框?yàn)?4px
            border-image-source:url(border.png); 
            border-image-slice:27 27 27 27; //邊框圖片被切成9個(gè)區(qū)域，其中4個(gè)頂角的大小為 27*27px
}

對(duì)此我的理解是如下步驟：

詳情請(qǐng)點(diǎn)擊：slice切片的值比邊框?qū)挾刃?/a>

說(shuō)說(shuō)fill值
fill值是一個(gè)可選屬性值，假如指定這個(gè)值，那么第九區(qū)就會(huì)出現(xiàn)，假如不指定，那么第九區(qū)就被外星人攻占，隱藏起來(lái)?。窍聲?huì)有demo↓）
兩點(diǎn)注意：
1、slice不允許設(shè)置負(fù)值，設(shè)置負(fù)值和設(shè)置大于盒子的高度或者寬度都被100%，（樓下有demo↓）
2、slice切過(guò)的區(qū)域有可能會(huì)重疊，如果右切和左切的值之和≥盒子的寬度，那么頂部區(qū)域(5號(hào))和底部區(qū)域（7號(hào)）為空白（樓下有demo↓），反之亦然。
更多詳情，請(qǐng)各位爺輕戳：demo 

能不能控制圖片邊框的寬度，而不是每次都要調(diào)試盒子邊框?qū)挾?？?dāng)然是有，下面就來(lái)介紹這個(gè)border-image-width這個(gè)可選屬性值

邊框圖片寬度border-image-width

我叫border-image-width，我的作用就是代替盒子本身的邊框?qū)挾萣order-width。假如指定，那么邊框圖片寬度就由我來(lái)做主，假如不指定，那么圖片邊框?qū)挾染陀珊凶拥倪吙驅(qū)挾葋?lái)固定。我可以用具體像素、數(shù)字（表示幾倍）和百分比來(lái)表示，最少1個(gè)值，最多4個(gè)值，分別代表上右下左圖片邊框?qū)挾?，注意哦，相關(guān)代碼如下：

.border-image{ 
            border:20px solid #000;  //盒子邊框?qū)挾葹?0px
            border-image-source:url(border.png); 
            border-image-width:27px 1 10% 27px; //邊框圖片寬度設(shè)置為top:27px,right:1倍,bottom:10%,left:27px，因此這些值將代替20px成為圖片邊框?qū)挾取?}

邊框圖片外凸border-image-outset

我叫border-image-outset，我的作用就讓邊框背景延伸到盒子外。有兩個(gè)屬性值length和number，前者是具體的像素單位，后者是數(shù)字，最少1個(gè)值，最多4個(gè)，分別代表上右下左圖片邊框向外延伸的距離，相關(guān)代碼如下：

.border-image{ 
            border:27px solid #000;  //盒子邊框?qū)挾葹?7px
            border-image-source:url(border.png); 
            border-image-outset:27px 27px 27px 27px; //邊框圖片向設(shè)置為27px，那么背景圖將會(huì)從盒子最外邊界向外上右下左各延伸27px。
}

邊框圖片重復(fù)border-image-repeat

我叫border-image-repeat，顧名思義，我的作用就讓邊框背景是否重復(fù)，默認(rèn)值為stretch，是拉伸的意思，4個(gè)角4個(gè)區(qū)域分別做水平和垂直方向的拉伸，來(lái)填補(bǔ)邊框的間隙；repeat是就是讓4個(gè)角4個(gè)區(qū)域做完水平和垂直方向的復(fù)制圖像，做CTRL+V運(yùn)動(dòng)，把邊框之間的空隙填滿(mǎn)；而round[環(huán)繞]是把4個(gè)角和4個(gè)區(qū)域分成均等區(qū)域，然后用背景圖片切好能鋪滿(mǎn)整個(gè)邊框空隙，不能多也不能少，正好合適。聽(tīng)說(shuō)下面有demo↓：

.border-image-stretch{ 
		border:27px solid #000; 
		border-image-source:url(http://likemindfilms.com/UploadFiles/2014-10/2/201410191273754705.png);
		border-image-slice:27 27 27 27;
		border-image-repeat:stretch;
}/*拉伸*/

.border-image-repeat{ 
		border:27px solid #000; 
		border-image-source:url(http://likemindfilms.com/UploadFiles/2014-10/2/201410191273754705.png);
		border-image-slice:27 27 27 27;
		border-image-repeat:repeat;
}/*重復(fù)*/		
.border-image-round{ 
		border:27px solid #000; 
		border-image-source:url(http://likemindfilms.com/UploadFiles/2014-10/2/201410191273754705.png);
		border-image-slice:27 27 27 27;
		border-image-repeat:round;
}/*環(huán)繞*/

效果如下：

可以點(diǎn)擊這里查看完整：邊框圖片重復(fù)屬性值

應(yīng)用

對(duì)于應(yīng)用來(lái)說(shuō)，這個(gè)邊框圖片太強(qiáng)大了的，隨便一折騰就可以弄出奇形怪狀的邊框來(lái)，使得邊框不在拘泥于那些傳統(tǒng)的線(xiàn)框。不管你是調(diào)slice值，還是repeat值、或者是outset值都可以變化很多新花招，剛剛我們其實(shí)在做demo展示的時(shí)候已經(jīng)展現(xiàn)出來(lái)，那么下面我就用來(lái)一個(gè)一張圖片構(gòu)造最簡(jiǎn)單的我們的圓弧長(zhǎng)方形。
用到圖片：

效果如下：

更多詳細(xì)demo，請(qǐng)點(diǎn)擊：僅僅是圖片寬度改變demo展示

結(jié)語(yǔ)

好了，就這么多了，這個(gè)屬性目前對(duì)于IE來(lái)說(shuō)真是渣渣，但是手機(jī)端上的兼容性還是非常友好的，假如你不想用老舊的線(xiàn)來(lái)構(gòu)造一個(gè)邊框的話(huà)，那么就換一張圖片來(lái)構(gòu)造豐富的邊框樣式吧，你會(huì)發(fā)現(xiàn)，css3的世界真是非常強(qiáng)大的。