CSS3提供了一個(gè)新的屬性集合，用這幾個(gè)屬性可以嵌入圖片形式的邊框。這樣，邊框就可以自定義了。

1.border-image-source//引入背景圖片地址

2.border-image-slice//切割引入背景圖片

3.border-image-width//邊框圖片的寬度

4.border-image-repeat//邊框背景圖片的排列方式

5.border-image-outset//邊框背景向外擴(kuò)張

6.border-image//上面五個(gè)屬性的簡(jiǎn)寫(xiě)方式

首先，用Photoshop軟件分析一下這個(gè)標(biāo)準(zhǔn)九宮格的總體大小和每個(gè)格子的大小。

最終得出圖片總大小為81px正方形，四個(gè)角的大小為27px的正方形，其余五個(gè)角也是27px。那么

div {
margin-left:50px;

margin-top:50px;
width: 400px;
height: 400px;
background:green;
border-image-source: url(border.png);
border-image-width: 27px;      //紅色方格的大小
border-image-slice: 27;       //保證邊角只切一個(gè)方格（紅色方格）
border-image-outset: 27px;    //該邊框包圍在div的外部
border-image-repeat: round;   //除四角之外，中間部分的顯示方式

}

四個(gè)角設(shè)定好之后，我們要設(shè)定四個(gè)變的顯示排列方式。使用border-image-repeat屬性，有四個(gè)值提供使用

stretch指定用拉伸方式填充邊框背景圖。默認(rèn)值。

repeat指定用平鋪方式來(lái)填充邊框背景圖。當(dāng)圖片碰到邊界時(shí)，如果超過(guò)則被截?cái)唷?/p>

round指定用平鋪方式來(lái)填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的大小，直至正好可以鋪滿(mǎn)整個(gè)邊框。

space指定用平鋪方式來(lái)填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的之間的間距，直至正好可以鋪滿(mǎn)整個(gè)邊框。

//拉伸方式填充，當(dāng)然，通過(guò)上右下左設(shè)置四個(gè)邊均可

border-image-repeat:stretch;

//平鋪填充，超過(guò)則被截?cái)?/p>

border-image-repeat:repeat;

//平鋪填充，動(dòng)態(tài)調(diào)整圖片大小直至鋪滿(mǎn)

border-image-repeat:round;

//平鋪填充，動(dòng)態(tài)調(diào)整圖片的間距直至鋪滿(mǎn)

border-image-repeat:space;

//另一個(gè)按鈕的小例子

div{
margin-left:50px;

margin-top:50px;
width: 200px;
height: 40px;
border-image-source: url(button.png);
border-image-width: 10px;
border-image-outset:10px;
border-image-slice: 10 fill;

}

簡(jiǎn)寫(xiě)和版本
//border-image簡(jiǎn)寫(xiě)格式很簡(jiǎn)單，具體如下：

border-image：<‘border-image-source’>||<‘border-image-slice’>[/<‘border-image-width’>|/<‘border-image-width’>?/<‘border-image-outset’>]?||<‘border-image-repeat’>

//以上是手冊(cè)上摘錄的，轉(zhuǎn)換成實(shí)際格式如下：

margin-left:50px;
margin-top:50px;
width: 400px;
height: 400px;
background:green;
border-image: url(border.png) 27/27px/27px round;

//兼容加上前綴

-webkit-border-image:url(border.png) 27/27px round;

-moz-border-image:url(border.png) 27/27px round;

-o-border-image:url(border.png)27/27px round;

border-image:url(border.png) 27/27px round