隨著WEB頁面設(shè)計(jì)的進(jìn)步，圖像排版也越來越復(fù)雜，對于九宮格布局，CSS3提供了一個(gè)強(qiáng)大的屬性border-image，用于制作各種形狀的圖片邊框。

Border-image實(shí)際上是把一個(gè)大圖像分割成了九個(gè)部分，以“九宮格的形式”顯示。其中四個(gè)角是固定不變的，四條邊的大小是不斷重復(fù)的，而中間的區(qū)域是可以拉伸的，來匹配不同大小的邊框。

.box{
border-width: 30px;
border-image: url(img.png) 30 stretch;
}

上面就是一個(gè)九宮格邊框的代碼，其中img.png是指定的大圖，30px是用于設(shè)定邊框?qū)挾鹊闹担鴖tretch就是一個(gè)關(guān)鍵字，表示邊框的中間區(qū)域可以根據(jù)需要拉伸。

邊框圖片的制作可以使用眾多的工具，例如photoshop、GIMP、圖像處理軟件等等，只需將圖片分割成九個(gè)部分，并根據(jù)需要制作邊框的大小和形態(tài)，然后再將生成的圖片作為border-image屬性使用即可。

總之，border-image是一個(gè)十分有用的屬性，能夠?yàn)轫撁嬖O(shè)計(jì)和布局帶來更多的靈活性和美觀性，值得WEB頁面設(shè)計(jì)師和開發(fā)者去熟悉和學(xué)習(xí)。