CSS3 border-image 屬性

實例

將圖片規(guī)定為包圍 div 元素的邊框：

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

頁面底部有更多實例。

瀏覽器支持

Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 屬性。

Safari 5 支持替代的 -webkit-border-image 屬性。

定義和用法

border-image 屬性是一個簡寫屬性，用于設(shè)置以下屬性：

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

如果省略值，會設(shè)置其默認(rèn)值。

提示：請使用 border-image-* 屬性來構(gòu)造漂亮的可伸縮按鈕！

可能的值

親自試一試 - 實例

Border-image 按鈕

本例演示如何通過 border-image 屬性來創(chuàng)建按鈕。

相關(guān)頁面

CSS3 教程：CSS3 邊框