9. 邊框圖片
border-image 屬性允許你在元素的邊框上設定圖片， 讓你從通常的solid, dotted 和其它邊框樣式中解放出來。該屬性給設計師一個更好的工具，用它可以方便的定義設計元素的邊框樣式，比background-image 屬性(對高級設計來說) 或枯燥的默認邊框樣式更好用。我們也可以明確的定義一個邊框可以被如何縮放或平鋪。
SpoonGraphics 博客為它的圖片邊框使用了border-image 屬性。
在SpoonGraphis blog中，border-image被用于圖片邊框，如下所示： #content .post img {
border: 6px solid #f2e6d1;
-webkit-border-image: url(main-border.png) 6 repeat;
-moz-border-image: url(main-border.png) 6 repeat;
border-image: url(main-border.png) 6 repeat;
} 要想定義border-image，我們必須指定圖片地址，圖片的那部分將被剪切并用于元素的每一個邊上，以及圖片是否被縮放或平鋪。
為了制作一個使用下面的圖片作為邊框的div ，我們應該使用下面的代碼(我們將為這個例子添加Opera 和Konqueror 支持):
div {
border-width: 18px 25px 25px 18px;
-webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
-moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
-o-border-image: url(example.png) 18 25 25 18 stretch stretch;
-khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
border-image: url(example.png) 18 25 25 18 stretch stretch;
}
該屬性的最后一個值可以是stretch (默認), round (只有一個平鋪了整數(shù)倍的圖片被填充在允許的地方) 或repeat。在我們的例子中，上下左右邊框圖片被拉伸。如果我們只想頂部和底部邊框被拉伸，我們可以使用下面的CSS: div {
(...)
border-image: url(example.png) 18 25 25 18 stretch repeat;
}我們可以可以單獨的指定每一個角，如果我們想為每一個角使用不同的圖片： div {
border-top-image: url(example.png) 5 5 stretch;
border-right-image: url(example.png) 5 5 stretch;
border-bottom-image: url(example.png) 5 5 stretch;
border-left-image: url(example.png) 5 5 stretch;
border-top-left-image: url(example.png) 5 5 stretch;
border-top-right-image: url(example.png) 5 5 stretch;
border-bottom-left-image: url(example.png) 5 5 stretch;
border-bottom-right-image: url(example.png) 5 5 stretch;
}如果瀏覽器不支持border-image 屬性，它將無視這些屬性，并只應用定義的其它邊框?qū)傩�，比如border-width 和border-color.
瀏覽器支持: border-image 目前只有Webkit核心瀏覽器支持。不太確定Firefox的下一個版本是否支持。
擴展閱讀：
出處：藍色理想
責任編輯：bluehearts
上一頁 圓角(邊框半徑) 下一頁 盒陰影
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 9 頁 邊框圖片
