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

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

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

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

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

5.border-image-outset//邊框背景向外擴張

6.border-image//上面五個屬性的簡寫方式

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

最終得出圖片總大小為81px正方形，四個角的大小為27px的正方形，其余五個角也是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;       //保證邊角只切一個方格（紅色方格）
border-image-outset: 27px;    //該邊框包圍在div的外部
border-image-repeat: round;   //除四角之外，中間部分的顯示方式

}

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

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

repeat指定用平鋪方式來填充邊框背景圖。當(dāng)圖片碰到邊界時，如果超過則被截斷。

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

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

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

border-image-repeat:stretch;

//平鋪填充，超過則被截斷

border-image-repeat:repeat;

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

border-image-repeat:round;

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

border-image-repeat:space;

//另一個按鈕的小例子

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;

}

簡寫和版本
//border-image簡寫格式很簡單，具體如下：

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

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

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