CSS3实例教程:border-image属性实例讲解
一、border-image的兼容性
border-image可以說是CSS3中的一員大將，將來一定會(huì)大放光彩，其應(yīng)用潛力真的是非常的驚人。可惜目前支持的瀏覽器有限，僅Firefox3.5，chrome瀏覽器，Safari3+支持border-image。所以，就本文而言，IE瀏覽器可以回家休息了，Firefox3及其以下以及Opera瀏覽器也可以休息去看《阿凡達(dá)》了。所以，本文提供的一些demo頁面，要在Firefox3.5+，chrome或Safari3+瀏覽器下才可以看到效果。
二、熟悉border-image的一些特性
我們可能對(duì)于CSS2中的background屬性比較熟悉，例如：background:url(xx.jpg) 27px no-repeat;
指代的是圖片(url(xx.jpg))，位置(27px)，重復(fù)性(no-repeat)。
border-image于此類似，border-image包括圖片，剪裁位置（與background位置一樣，也是數(shù)值，也支持百分值），重復(fù)性。例如：border-image:url(border.png) 27 repeat;，指的就是圖片(url(border.png))，剪裁位置(27)，重復(fù)方式(repeat)。試著對(duì)比background，這有助于border-image屬性的記憶。
具體描述border-image的參數(shù)
border-image的參數(shù)就是上面提到的三個(gè)：圖片，剪裁位置，重復(fù)性。
1、圖片(border-image-source)
與CSS2中background-image屬性一樣，border-image的背景圖使用url()調(diào)用，圖片可以是相對(duì)路徑或是絕對(duì)路徑，也可以不使用圖片，即border-image:none;
2、圖片剪裁位置(border-image-slice)
此參數(shù)特點(diǎn)比較鮮明：
1、沒有單位，專指像素。這類似于flash的as腳本，舞臺(tái)高寬，影片剪輯大小，位移直接就是一個(gè)數(shù)值，沒有單位，因?yàn)槟J(rèn)單位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;這里的27專指27像素。
2、支持百分比值，百分比值大小事相對(duì)于邊框圖片而言，假設(shè)邊框圖片大小為400px*300px，則20%的實(shí)際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小。
3、剪裁特性。如果您對(duì)CSS中clip屬性(clip:rect(auto, auto, auto, auto))比較了解，則這里理解就會(huì)輕松些。clip可以說是CSS中一個(gè)明目張膽的剪裁屬性，而此處的屬性雖然表意上不是剪裁，但是在border-image效果的實(shí)現(xiàn)上來說，就好像是個(gè)剪裁工具，把邊框圖片四分五裂，再重新安置，變形。其有1~4個(gè)參數(shù)，其方位規(guī)則符合CSS普遍的方位規(guī)則（與margin，padding等或border-width一致），上右下左順時(shí)針，再賦予剪裁的含義，舉個(gè)簡(jiǎn)單的例子，前面提到，支持百分比寬度，所以這里“30% 35% 40% 30%的”示意可以用下圖表示：
看圖說話就是，離圖片上部30%的地方剪裁一下，在右邊35%的地方剪裁一下，在離底部40%的地方裁剪一下，在距左邊30%的地方也剪裁一下。于是總共對(duì)圖片進(jìn)行了“四刀切”，形成了九個(gè)分離的區(qū)域，這就是九宮格，這是下面深入講解border-image的基礎(chǔ)。
3、重復(fù)性(border-image-repeat)
這里的重復(fù)性有別于background的背景重復(fù)，差別較大。background圖片就是重復(fù)，不重復(fù)，水平重復(fù)，垂直重復(fù)，總之就是圍繞repeat（重復(fù)）這個(gè)詞打轉(zhuǎn)，一家獨(dú)大。而對(duì)于border-image，可謂是三足鼎立，repeat（重復(fù)）只是其中之一，其余兩個(gè)是round（平鋪）和stretch（拉伸）。其中，stretch是默認(rèn)值。
參數(shù)0~2個(gè)，0則使用默認(rèn)值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1則表示水平方向及垂直方向均使用此參數(shù)；2個(gè)參數(shù)的話則第一個(gè)參數(shù)表水平方向，第二個(gè)參數(shù)表示垂直方向。例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平鋪），垂直方向repeat（重復(fù)），至于何為平鋪何為重復(fù)下面會(huì)深入講解。
三、深入理解border-image的寬度和展示方式
分開理解border-image的寬度或是展示方式其實(shí)不太難的，關(guān)鍵是這兩者結(jié)合使用時(shí)候的含義，需要花一定的功夫的理解。
幫助理解的九宮格模型
何為九宮格？為什么我們需要九宮格幫助理解？
“九宮格”是我國(guó)書法史上臨帖寫仿的一種界格，又叫“九方格”，即在紙上畫出若干大方框，再于每個(gè)方框內(nèi)分出九個(gè)小方格，以便對(duì)照法帖范字的筆畫部位進(jìn)行練字。在本文，“九宮格”就專指由九個(gè)方格形成的矩形布局，例如左圖就是一個(gè)很簡(jiǎn)單的數(shù)字九宮格。
border-image的數(shù)值參數(shù)其實(shí)是用來剪裁邊框圖片的，正好“嘩嘩四刀”切出了個(gè)九宮格的模型，所以，有意或無意，巧合還是必然，我們需要用到九宮格模型幫助我們理解border-image的繪制原理。下面這張圖是本文非常重要的基本的示意圖，因?yàn)檫@是張具有代表性的九宮格圖案(27*3)*(27*3)。
<————————>
這張圖能夠幫助我們更好的理解border-image的剪裁及繪制的原理。
邊框?qū)order-image分成了九部分：border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image以及中間的內(nèi)容區(qū)域。假設(shè)現(xiàn)在邊框的寬度是27像素，則上面所說的九部分正如下圖所表示的（放大400%）：
左圖中，橙紅色的四個(gè)邊角的菱形區(qū)域稱為“角邊框圖片”，在border-image中，角邊框圖片是沒有任何展示效果的，不會(huì)平鋪，不會(huì)重復(fù)，也不會(huì)拉伸，有點(diǎn)類似于視覺中盲點(diǎn)的意思。
而對(duì)邊的四個(gè)橙黃色區(qū)域?qū)儆谡故拘Ч淖饔脜^(qū)（也是邊框?qū)挾扔?jì)算剩余區(qū)），上下區(qū)域即border-top-image和border-bottom-image區(qū)域受到展示效果屬性的第一個(gè)參數(shù)——水平方向效果影響：如果為repeat，則此區(qū)域圖片會(huì)水平重復(fù)，如果是round，則此框框內(nèi)的圖片會(huì)水平平鋪，如果是stretch，則此矩形域中的圖片就會(huì)被水平拉伸。（下部分的實(shí)例會(huì)做具體演示）左右區(qū)域只有垂直方向上的效果，與上下區(qū)域效果對(duì)應(yīng)，不多說。
中間的區(qū)域（左圖的空白格）受到全部參數(shù)的作用，在水平和垂直兩個(gè)維度上都有展示效果（平鋪、拉伸等）。
這里，插一點(diǎn)內(nèi)容，講一下round（平鋪），repeat（重復(fù)），stretch（拉伸）所具體指代的效果。這三個(gè)特性其實(shí)大家應(yīng)該都比較熟悉。看下圖：
在windows系統(tǒng)桌面壁紙顯示方式選項(xiàng)中就有“拉伸”和“平鋪”，這兩個(gè)效果與border中“拉伸”和“平鋪”效果一致。只是可能在理解“平鋪”和“重復(fù)”的區(qū)別上有點(diǎn)丈二的和尚——摸不著頭腦。記住這么一點(diǎn)：平鋪可能會(huì)改變了原圖片顯示的大小，重復(fù)不改變圖片顯示的大小。
這么比方吧，您從萬科地產(chǎn)買了個(gè)99.5m*99.5m的毛坯房，地面要貼瓷磚，都是1m*1m的正方形瓷磚。如果是“平鋪”，對(duì)不起，這1m邊長(zhǎng)的瓷磚不行，要處理！怎么處理法？很簡(jiǎn)單，每個(gè)瓷磚壓成0.995m*0.995m的，這樣就可以了，所以，平鋪就是以完整的單元鋪滿整個(gè)區(qū)域。如果是重復(fù)，就直接把這1m*1m的瓷磚從一個(gè)角落一個(gè)一個(gè)的放置，放到頭放不下了怎么辦？直接把瓷磚從中間“咔”掉，于是最后會(huì)在房子的邊角看到很多半截的瓷磚。下面就是一個(gè)個(gè)的實(shí)例演示了，您可以通過下面的實(shí)例效果中加深理解。
幫助理解的一些實(shí)例
下面的實(shí)例代碼對(duì)應(yīng)的demo頁面要在Firefox3.5、chrome或Safari3+瀏覽器下才可以看到效果。所使用的背景圖片就是前面提到的九宮格代表圖（8菱形 – 81px*81px），名稱為border.png。
1、27像素剪裁寬高(1/3邊框圖片寬高)在1em邊框?qū)挾认碌哪J(rèn)顯示
CSS代碼：
結(jié)果：
您可以狠狠地點(diǎn)擊這里：實(shí)例demo1
效果分析：
這里沒有顯示方式的參數(shù)，正如上面所說的，0參數(shù)即使用默認(rèn)的stretch拉伸，所以從圖上可以看到四個(gè)對(duì)邊的拉伸效果。上面還提到，四個(gè)對(duì)角是不受重復(fù)方式影響，該什么樣子還是什么樣子，無拉伸平鋪，本面目示人。見下圖的標(biāo)注（放大200%）。
這個(gè)九宮格各區(qū)域展示方式的標(biāo)注圖在border-image中是通用的，無論border-image的代碼如何改變，其顯示效果的原理核心就是左邊這張九宮標(biāo)注圖，亙古不變的是四個(gè)邊角，這四個(gè)邊角就是四條邊框的重疊區(qū)域，不會(huì)有拉伸或是重復(fù)的展現(xiàn)效果。有變化的就是四邊區(qū)域和中心區(qū)域，這幾個(gè)區(qū)域中的水平和垂直屬性也是穩(wěn)如泰山，屹立不變的，改變的就只是“拉伸”而已，變成重復(fù)啦或是平鋪。
由于其通用性，所以此顯示原理標(biāo)注圖在下面就不一一展示了，您找到對(duì)應(yīng)的位置，修改“拉伸”為“平鋪”或“重復(fù)”即可，其他都不用改變。
2、27像素剪裁在1em邊框?qū)挾认聄ound（平鋪）顯示效果
CSS代碼：
結(jié)果：
您可以狠狠地點(diǎn)擊這里：實(shí)例demo2
3、27像素剪裁在1em邊框?qū)挾认聄epeat（重復(fù)）效果
CSS代碼：
結(jié)果：
您可以狠狠地點(diǎn)擊這里：實(shí)例demo3
上圖我圈了四個(gè)邊角，不難發(fā)現(xiàn)，這一個(gè)邊角處的菱形都是被截掉的。這就是repeat的效果，還記得上面的毛坯房的例子嗎？round會(huì)壓縮（或伸展）圖片大小使其正好在區(qū)域內(nèi)顯示，而repeat是不管三七二十一直接重復(fù)的，而且是居中重復(fù)，repeat從中間開始（這是我的觀察，可能不準(zhǔn)確）。
這里還有一點(diǎn)需要注意：在webkit核心的瀏覽器下這個(gè)round屬性和repeat屬性似乎沒有沒有區(qū)分，顯示的效果是一樣的，所以您在chrome瀏覽器或是Safari瀏覽器下看demo2和demo3的效果可能是一樣的。Firefox3.5下可以準(zhǔn)確區(qū)分這兩個(gè)參數(shù)。
4、上實(shí)例樣式縮寫
上面的實(shí)例還可以進(jìn)一步縮寫。CSS如下：
實(shí)現(xiàn)的效果是一樣的。您可以狠狠地點(diǎn)擊這里：實(shí)例demo4
border-image繪制原理簡(jiǎn)述
我是這樣理解的：共存在兩個(gè)九宮格，一個(gè)是邊框圖片，還有一個(gè)就是邊框本身，九個(gè)方位關(guān)系一一對(duì)應(yīng)。邊框本身的特性讓其變成了一個(gè)九宮格，四條邊框交錯(cuò)，加上其圍住的區(qū)域，正好形成一個(gè)九宮格。邊框圖片則是通過圖片剪裁實(shí)現(xiàn)了九宮格。這是理解繪制原理的基礎(chǔ)。
1、調(diào)用邊框圖片
border-image的url屬性，通過相對(duì)或絕對(duì)路徑鏈接圖片。
2、邊框圖片的剪裁
border-image的數(shù)值參數(shù)剪裁邊框圖片，形成九宮格。
3、剪裁圖片填充邊框
邊框圖片被切割成9部分，以一一對(duì)應(yīng)的關(guān)系放到div邊框的九宮格中，然后再壓縮（或拉伸）至邊框（border-width或border-image-width）的寬度大小。
4、執(zhí)行重復(fù)屬性
被填充至邊框九宮格四個(gè)角落的的邊框圖片是不執(zhí)行重復(fù)屬性的。上下的九宮格執(zhí)行水平方向的重復(fù)屬性（拉伸或平鋪），左右的格子執(zhí)行垂直方向的重復(fù)屬性，而中間的那個(gè)格子則水平重復(fù)和垂直方向的重復(fù)都要執(zhí)行。
5、完成繪制，實(shí)現(xiàn)效果
繪制原理動(dòng)畫示意，本flash動(dòng)畫以第一個(gè)demo效果做示例，請(qǐng)點(diǎn)擊其中的“下一步”按鈕，可看到一步一步的演示：
四、border-image的一些應(yīng)用
自適應(yīng)的圓角效果
使用圖片如下：
此圖片的剪裁寬度為20像素，基本上就是此圖的圓角大小。div的邊框?qū)挾葹?0像素，其CSS核心樣式如下：
.border_image{-moz-border-image:url(../image/rounded_corner.png) 20/10px;-webkit-border-image:url(../image/border.png) 20/10px; }結(jié)果如下：
您可以狠狠地點(diǎn)擊這里：圓角效果demo
多邊框效果
使用圖片如下：
圓角和邊框大小都是20，就不上CSS代碼了，大同小異。終效果如下圖：
您可以狠狠地點(diǎn)擊這里：多邊框效果demo
投影效果
使用素材圖片如下：
剪裁寬度和邊框?qū)挾榷际? 5 6 2，這里的投影我直接使用photoshop的投影樣式生成的，發(fā)現(xiàn)用在邊框投影上有一點(diǎn)點(diǎn)不足，需要手動(dòng)調(diào)整，截取投影的四邊，以及重復(fù)區(qū)域再拼合一下，您可以自己試試如果實(shí)現(xiàn)最佳的投影效果。
效果如下圖：
您可以狠狠地點(diǎn)擊這里：投影效果demo
選項(xiàng)卡
自適應(yīng)選項(xiàng)卡，CSS2中實(shí)現(xiàn)自適應(yīng)選項(xiàng)卡需要將背景圖片制作的較長(zhǎng)，而且需要兩層標(biāo)簽，但是在CSS3中，圖片要短，且一個(gè)標(biāo)簽就可以搞定。例如，這是淘寶新首頁搜索選項(xiàng)卡的背景圖片（已剪裁），，要是使用border-image，只要值么點(diǎn)圖就可以了，
邊框圖片剪裁大小和邊框?qū)挾榷际? 5 0；底邊為0，其余都是5像素，結(jié)果效果為：
您可以狠狠地點(diǎn)擊這里：選項(xiàng)卡demo
其他
還有很多其他的應(yīng)用，以前我們制作漸變背景，一張背景圖很少可以重復(fù)使用，而有了border-image后就不會(huì)有這樣的問題了，因?yàn)槠淇梢岳臁Ｎ覀冞€可以利用border-image做高光按鈕，做自適應(yīng)的popup對(duì)話框，等等，太多了，就不一一舉例了。
五、border-image效果的jQuery插件
正如開始所講的，border-image僅Firefox3.5，chrome，Safari支持，IE這類瀏覽器不支持，但是并不代表他們無法實(shí)現(xiàn)類似的效果。例如利用canvas繪圖，可以讓Firefox2實(shí)現(xiàn)類似效果，IE下的VML語言也是支持矢量繪圖，而這些就是此jQuery插件實(shí)現(xiàn)類似border-image效果的原理或稱之為核心。
您可以狠狠地點(diǎn)擊這里：jquery.borderImage.js（插件js）
使用方法
首先需要調(diào)用jQuery庫，然后就是上面提供的js文件了。方法為borderImage，如下面的示例代碼：
對(duì)此插件我個(gè)人評(píng)價(jià)不高，原因如下：
一是IE6及以上也可以實(shí)現(xiàn)類似canvas效果（需js插件支持），沒有必要修改頭部什么再使用VML繪圖；
二是兼容性欠佳，IE6下無法實(shí)現(xiàn)高寬大于100像素的邊框的拉伸；IE8下貌似也有點(diǎn)問題。
因而，我不具體說，一帶而過。
您可以狠狠地點(diǎn)擊這里：border-image效果jQuery插件demo
六、總結(jié)
從本文的篇幅可以看到border-image的潛力真是很驚人，我可以感覺到這將會(huì)是CSS3中的重磅武器之一。本文大部分的精力是在講解border-image的原理，因?yàn)槲曳浅？春胋order-image的應(yīng)用前景，所以盡可能細(xì)致的講清楚border-image各個(gè)屬性的含義，讓即使初學(xué)者也能較好的理解border-image的含義，本文列舉的幾個(gè)應(yīng)用可以說只是border-image最基本的些應(yīng)用。如果加上些創(chuàng)意的思考和天馬行空的想象，真不知border-image可以創(chuàng)造出什么奇妙的事情來。
我開始深入學(xué)習(xí)CSS3方面的東西也只是最近開始，這東西，非要投入進(jìn)入，你才會(huì)感受到這玩意真是酷，太不可思議了。我現(xiàn)在可以想象如果CSS3的世界到來，那時(shí)候，網(wǎng)頁將會(huì)是多么精彩的一個(gè)世界。好了，就說這些，共同進(jìn)步吧。
七、參考內(nèi)容
1、百度百科，九宮格：http://baike.baidu.com/view/230179.htm?fr=ala0_1_1
2、W3C官方文檔： CSS Backgrounds and Borders Module Level 3
3、CSS3中文手冊(cè)
4、Meet a ninja living in browsers
總結(jié)
以上是生活随笔為你收集整理的CSS3实例教程:border-image属性实例讲解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JS获取字符串实际长度！
- 下一篇： 理解CSS3 transform中的Ma