CSS3 border-image詳解、應用及jQuery插件

1、border-image的兼容性
border-image能夠說是CSS3中的一員大將，未來必定會大放光彩，其應用潛力真的是很是的驚人。惋惜目前支持的瀏覽器有限，僅 Firefox3.5，chrome瀏覽器，Safari3+支持border-image。因此，就本文而言，IE瀏覽器能夠回家休息 了，Firefox3及其如下以及Opera瀏覽器也能夠休息去看《阿凡達》了。因此，本文提供的一些demo頁面，要在 Firefox3.5+，chrome或Safari3+瀏覽器下才能夠看到效果。

2、熟悉border-image的一些特性
咱們可能對於CSS2中的background屬性比較熟悉，例如：background:url(xx.jpg) 27px no-repeat;
指代的是圖片(url(xx.jpg))，位置(27px)，重複性(no-repeat)。

border-image於此相似，border-image包括圖片，剪裁位置（與background位置同樣，也是數值，也支持百分值），重複性。例如：border-image:url(border.png) 27 repeat;，指的就是圖片(url(border.png))，剪裁位置(27)，重複方式(repeat)。試着對比background，這有助於border-image屬性的記憶。

具體描述border-image的參數
border-image的參數就是上面提到的三個：圖片，剪裁位置，重複性。
一、圖片(border-image-source)
與CSS2中background-image屬性同樣，border-image的背景圖使用url()調用，圖片能夠是相對路徑或是絕對路徑，也能夠不使用圖片，即border-image:none;

二、圖片剪裁位置(border-image-slice)
此參數特色比較鮮明：
一、沒有單位，專指像素。這相似於flash的as腳本，舞臺高寬，影片剪輯大小，位移直接就是一個數值，沒有單位，由於默認單位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;這裏的27專指27像素。

二、支持百分比值，百分比值大小事相對於邊框圖片而言，假設邊框圖片大小爲400px*300px，則20%的實際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小。

三、剪裁特性。若是您對CSS中clip屬性(clip:rect(auto, auto, auto, auto))比較瞭解，則這裏理解就會輕鬆些。clip能夠說是CSS中一個明目張膽的剪裁屬性，而此處的屬性雖然表意上不是剪裁，可是在border- image效果的實現上來講，就好像是個剪裁工具，把邊框圖片四分五裂，再從新安置，變形。其有1~4個參數，其方位規則符合CSS廣泛的方位規則（與 margin，padding等或border-width一致），上右下左順時針，再賦予剪裁的含義，舉個簡單的例子，前面提到，支持百分比寬度，因此 這裏「30% 35% 40% 30%的」示意能夠用下圖表示：

看圖說話就是，離圖片上部30%的地方剪裁一下，在右邊35%的地方剪裁一下，在離底部40%的地方裁剪一下，在距左邊30%的地方也剪裁一下。因而總共對圖片進行了「四刀切」，造成了九個分離的區域，這就是九宮格，這是下面深刻講解border-image的基礎。

三、重複性(border-image-repeat)
這裏的重複性有別於background的背景重複，差異較大。background圖片就是重複，不重複，水平重複，垂直重複，總之就是圍繞 repeat（重複）這個詞打轉，一家獨大。而對於border-image，可謂是三足鼎立，repeat（重複）只是其中之一，其他兩個是 round（平鋪）和stretch（拉伸）。其中，stretch是默認值。

參數0~2個，0則使用默認值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同於border-image:url(border.png) 30% 40% stretch stretch;；1則表示水平方向及垂直方向均使用此參數；2個參數的話則第一個參數表水平方向，第二個參數表示垂直方向。例如：border-image:url(border.png) 30% 40%;就等同於border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平鋪），垂直方向repeat（重複），至於何爲平鋪何爲重複下面會深刻講解。

3、深刻理解border-image的寬度和展現方式
分開理解border-image的寬度或是展現方式其實不太難的，關鍵是這二者結合使用時候的含義，須要花必定的功夫的理解。

幫助理解的九宮格模型
何爲九宮格？爲何咱們須要九宮格幫助理解？

「九宮格」是我國書法史上臨帖寫仿的一種界格，又叫「九方格」，即在紙上畫出若干大方框，再於每一個方框內分出九個小方格，以便對照法帖範字的筆畫部位進行練字。在本文，「九宮格」就專指由九個方格造成的矩形佈局，例如左圖就是一個很簡單的數字九宮格。

border-image的數值參數實際上是用來剪裁邊框圖片的，正好「嘩嘩四刀」切出了個九宮格的模型，因此，有意或無心，巧合仍是必然，咱們須要 用到九宮格模型幫助咱們理解border-image的繪製原理。下面這張圖是本文很是重要的基本的示意圖，由於這是張具備表明性的九宮格圖案 (27*3)*(27*3)。
<————————>

這張圖可以幫助咱們更好的理解border-image的剪裁及繪製的原理。

邊框將border-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以及中間的內容區域。假設如今邊框的寬度是27像素，則上面所說的九部分正以下圖所表示的（放大 400%）：

左圖中，橙紅色的四個邊角的菱形區域稱爲「角邊框圖片」，在border-image中，角邊框圖片是沒有任何展現效果的，不會平鋪，不會重複，也不會拉伸，有點相似於視覺中盲點的意思。

而對邊的四個橙黃色區域屬於展現效果的做用區（也是邊框寬度計算剩餘區），上下區域即border-top-image和border- bottom-image區域受到展現效果屬性的第一個參數——水平方向效果影響：若是爲repeat，則此區域圖片會水平重複，若是是round，則此 框框內的圖片會水平平鋪，若是是stretch，則此矩形域中的圖片就會被水平拉伸。（下部分的實例會作具體演示）左右區域只有垂直方向上的效果，與上下 區域效果對應，很少說。

中間的區域（左圖的空白格）受到所有參數的做用，在水平和垂直兩個維度上都有展現效果（平鋪、拉伸等）。

這裏，插一點內容，講一下round（平鋪），repeat（重複），stretch（拉伸）所具體指代的效果。這三個特性其實你們應該都比較熟悉。看下圖：

在windows系統桌面壁紙顯示方式選項中就有「拉伸」和「平鋪」，這兩個效果與border中「拉伸」和「平鋪」效果一致。只是可能在理解「平 鋪」和「重複」的區別上有點丈二的和尚——摸不着頭腦。記住這麼一點：平鋪可能會改變了原圖片顯示的大小，重複不改變圖片顯示的大小。

這麼比方吧，您從萬科地產買了個99.5m*99.5m的毛坯房，地面要貼瓷磚，都是1m*1m的正方形瓷磚。若是是「平鋪」，對不起，這1m邊長 的瓷磚不行，要處理！怎麼處理法？很簡單，每一個瓷磚壓成0.995m*0.995m的，這樣就能夠了，因此，平鋪就是以完整的單元鋪滿整個區域。若是是重 復，就直接把這1m*1m的瓷磚從一個角落一個一個的放置，放到頭放不下了怎麼辦？直接把瓷磚從中間「咔」掉，因而最後會在房子的邊角看到不少半截的瓷 磚。下面就是一個個的實例演示了，您能夠經過下面的實例效果中加深理解。

幫助理解的一些實例
下面的實例代碼對應的demo頁面要在Firefox3.五、chrome或Safari3+瀏覽器下才能夠看到效果。所使用的背景圖片就是前面提到的九宮格表明圖（8菱形 – 81px*81px），名稱爲border.png。

一、27像素剪裁寬高(1/3邊框圖片寬高)在1em邊框寬度下的默認顯示
CSS代碼：

.border_image{
    width:400px;
    height:100px;
    -moz-border-image:url(../image/border.png) 27;
    -webkit-border-image:url(../image/border.png) 27;
    border:double orange 1em;
}

結果：

您能夠狠狠地點擊這裏：實例demo1

效果分析：
這裏沒有顯示方式的參數，正如上面所說的，0參數即便用默認的stretch拉伸，因此從圖上能夠看到四個對邊的拉伸效果。上面還提到，四個對角是不受重複方式影響，該什麼樣子仍是什麼樣子，無拉伸平鋪，本面目示人。見下圖的標註（放大200%）。

這個九宮格各區域展現方式的標註圖在border-image中是通用的，不管border-image的代碼如何改變，其顯示效果的原理核心就是 左邊這張九宮標註圖，亙古不變的是四個邊角，這四個邊角就是四條邊框的重疊區域，不會有拉伸或是重複的展示效果。有變化的就是四邊區域和中心區域，這幾個 區域中的水平和垂直屬性也是穩如泰山，屹立不變的，改變的就只是「拉伸」而已，變成重複啦或是平鋪。

因爲其通用性，因此此顯示原理標註圖在下面就不一一展現了，您找到對應的位置，修改「拉伸」爲「平鋪」或「重複」便可，其餘都不用改變。

二、27像素剪裁在1em邊框寬度下round（平鋪）顯示效果
CSS代碼：

.border_image{
    width:400px;
    height:100px;
    -moz-border-image:url(../image/border.png) 27 round;
    -webkit-border-image:url(../image/border.png) 27 round;
    border:double orange 1em;
}

結果：

您能夠狠狠地點擊這裏：實例demo2

三、27像素剪裁在1em邊框寬度下repeat（重複）效果
CSS代碼：

.border_image{
    width:400px;
    height:100px;
    -moz-border-image:url(../image/border.png) 27 repeat;
    -webkit-border-image:url(../image/border.png) 27 repeat;
    border:double orange 1em;
}

結果：

您能夠狠狠地點擊這裏：實例demo3

上圖我圈了四個邊角，不難發現，這一個邊角處的菱形都是被截掉的。這就是repeat的效果，還記得上面的毛坯房的例子嗎？round會壓縮（或伸 展）圖片大小使其正好在區域內顯示，而repeat是無論三七二十一直接重複的，並且是居中重複，repeat從中間開始（這是個人觀察，可能不許確）。

這裏還有一點須要注意：在webkit核心的瀏覽器下這個round屬性和repeat屬性彷佛沒有沒有區分，顯示的效果是同樣的，因此您在 chrome瀏覽器或是Safari瀏覽器下看demo2和demo3的效果多是同樣的。Firefox3.5下能夠準確區分這兩個參數。

四、上實例樣式縮寫
上面的實例還能夠進一步縮寫。CSS以下：

.border_image{
    width:400px;
    height:100px;
    -moz-border-image:url(../image/border.png) 27/1em repeat;
    -webkit-border-image:url(../image/border.png) 27/1em repeat;
    border:double orange 1em;
}

實現的效果是同樣的。您能夠狠狠地點擊這裏：實例demo4

border-image繪製原理簡述
我是這樣理解的：共存在兩個九宮格，一個是邊框圖片，還有一個就是邊框自己，九個方位關係一一對應。邊框自己的特性讓其變成了一個九宮格，四條邊框交錯，加上其圍住的區域，正好造成一個九宮格。邊框圖片則是經過圖片剪裁實現了九宮格。這是理解繪製原理的基礎。

一、調用邊框圖片
border-image的url屬性，經過相對或絕對路徑連接圖片。

二、邊框圖片的剪裁
border-image的數值參數剪裁邊框圖片，造成九宮格。

三、剪裁圖片填充邊框
邊框圖片被切割成9部分，以一一對應的關係放到div邊框的九宮格中，而後再壓縮（或拉伸）至邊框（border-width或border-image-width）的寬度大小。

四、執行重複屬性
被填充至邊框九宮格四個角落的的邊框圖片是不執行重複屬性的。上下的九宮格執行水平方向的重複屬性（拉伸或平鋪），左右的格子執行垂直方向的重複屬性，而中間的那個格子則水平重複和垂直方向的重複都要執行。

五、完成繪製，實現效果

繪製原理動畫示意，本flash動畫以第一個demo效果作示例，請點擊其中的「下一步」按鈕，可看到一步一步的演示：

4、border-image的一些應用
自適應的圓角效果
使用圖片以下：

此圖片的剪裁寬度爲20像素，基本上就是此圖的圓角大小。div的邊框寬度爲10像素，其CSS核心樣式以下：

.border_image{
    -moz-border-image:url(../image/rounded_corner.png) 20/10px;
    -webkit-border-image:url(../image/border.png) 20/10px;
}

結果以下：

您能夠狠狠地點擊這裏：圓角效果demo

多邊框效果
使用圖片以下：

圓角和邊框大小都是20，就不上CSS代碼了，大同小異。終效果以下圖：

您能夠狠狠地點擊這裏：多邊框效果demo

投影效果
使用素材圖片以下：

剪裁寬度和邊框寬度都是2 5 6 2，這裏的投影我直接使用photoshop的投影樣式生成的，發現用在邊框投影上有一點點不足，須要手動調整，截取投影的四邊，以及重複區域再拼合一下，您能夠本身試試若是實現最佳的投影效果。

效果以下圖：

您能夠狠狠地點擊這裏：投影效果demo

選項卡
自適應選項卡，CSS2中實現自適應選項卡須要將背景圖片製做的較長，並且須要兩層標籤，可是在CSS3中，圖片要短，且一個標籤就能夠搞定。例如，這是淘寶新首頁搜索選項卡的背景圖片（已剪裁），，要是使用border-image，只要值麼點圖就能夠了，

邊框圖片剪裁大小和邊框寬度都是5 5 0；底邊爲0，其他都是5像素，結果效果爲：

您能夠狠狠地點擊這裏：選項卡demo

其餘
還有不少其餘的應用，之前咱們製做漸變背景，一張背景圖不多能夠重複使用，而有了border-image後就不會有這樣的問題了，由於其能夠拉伸。咱們還能夠利用border-image作高光按鈕，作自適應的popup對話框，等等，太多了，就不一一舉例了。

5、border-image效果的jQuery插件
正如開始所講的，border-image僅Firefox3.5，chrome，Safari支持，IE這類瀏覽器不支持，可是並不表明他們沒法實現相似的效果。例如利用canvas繪圖，可讓Firefox2實現相似效果，IE下的VML語言也是支持矢量繪圖，而這些就是此jQuery插件實現相似border-image效果的原理或稱之爲核心。

您能夠狠狠地點擊這裏：jquery.borderImage.js（插件js）

使用方法
首先須要調用jQuery庫，而後就是上面提供的js文件了。方法爲borderImage，以下面的示例代碼：

$('#element').borderImage('url("border.png") 30% 35% 40% 30%');

對此插件我我的評價不高，緣由以下：
一是IE6及以上也能夠實現相似canvas效果（需js插件支持），沒有必要修改頭部什麼再使用VML繪圖；
二是兼容性欠佳，IE6下沒法實現高寬大於100像素的邊框的拉伸；IE8下貌似也有點問題。

於是，我不具體說，一帶而過。

您能夠狠狠地點擊這裏：border-image效果jQuery插件demo

6、總結
從本文的篇幅能夠看到border-image的潛力真是很驚人，我能夠感受到這將會是CSS3中的重磅武器之一。本文大部分的精力是在講解 border-image的原理，由於我很是看好border-image的應用前景，因此儘量細緻的講清楚border-image各個屬性的含義， 讓即便初學者也能較好的理解border-image的含義，本文列舉的幾個應用能夠說只是border-image最基本的些應用。若是加上些創意的思 考和天馬行空的想象，真不知border-image能夠創造出什麼奇妙的事情來。

我開始深刻學習CSS3方面的東西也只是最近開始，這東西，非要投入進入，你纔會感覺到這玩意真是酷，太難以想象了。我如今能夠想象若是CSS3的世界到來，那時候，網頁將會是多麼精彩的一個世界。好了，就說這些，共同進步吧。

7、參考內容
一、百度百科，九宮格：http://baike.baidu.com/view/230179.htm?fr=ala0_1_1
二、W3C官方文檔： CSS Backgrounds and Borders Module Level 3
三、CSS3中文手冊
四、Meet a ninja living in browsers

若是您發現文章中有表述不許確或是有相關問題須要交流能夠經過評論或是去 這裏進行提問交流。
原創文章，轉載請註明來自 張鑫旭-鑫空間-鑫生活[ http://www.zhangxinxu.com]