CSS border-image 屬性

定義和用法

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

如果省略值，會設置其默認值。

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

另請參閱：

CSS3 教程：CSS3 邊框

實例

將圖片規定為包圍 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;
}

親自試一試

頁面底部有更多實例。

CSS 語法

border-image: source slice width outset repeat|initial|inherit;

屬性值

值 描述 測試
border-image-source 用在邊框的圖片的路徑。
border-image-slice 圖片邊框向內偏移。
border-image-width 圖片邊框的寬度。
border-image-outset 邊框圖像區域超出邊框的量。
border-image-repeat 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 測試

技術細節

默認值： none 100% 1 0 stretch
繼承性： no
版本： CSS3
JavaScript 語法： object.style.borderImage="url(border.png) 30 30 round"

更多實例

Border-image 按鈕
本例演示如何通過 border-image 屬性來創建按鈕。

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-