CSS3 border-image 屬性

實(shí)例

將圖片規(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;
}

頁(yè)面底部有更多實(shí)例。

瀏覽器支持

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

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

定義和用法

border-image 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置以下屬性：

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

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

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

可能的值

親自試一試 - 實(shí)例

Border-image 按鈕

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

相關(guān)頁(yè)面

CSS3 教程：CSS3 邊框