CSS border-image-outset 屬性
示例
將邊框影像放置在元素邊框邊緣之外 10 畫素
#borderimg {
border-image-source: url(border.png);
border-image-outset: 10px;
}
自己動手試一試 »
定義和用法
border-image-outset
屬性指定邊框影像區域超出邊框框的距離。
提示: 還可以檢視 border-image 屬性(設定所有 border-image-* 屬性的簡寫屬性)。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
border-image-outset | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS 語法
border-image-outset: length|number|initial|inherit;
注意: border-image-outset
屬性可以接受一到四個值(頂部、右側、底部和左側)。如果省略第四個值,則與第二個值相同。如果第三個值也省略,則與第一個值相同。如果第二個值也省略,則與第一個值相同。
屬性值
值 | 描述 | 試一試 |
---|---|---|
length | 指定邊框影像距離邊緣多遠的長度單位。預設值為 0 | 演示 ❯ |
數字 | 表示相應 border-width 的倍數 | 演示 ❯ |
initial | 將此屬性設定為其預設值。閱讀關於initial | |
inherit | 從其父元素繼承此屬性。閱讀關於inherit |
相關頁面
CSS 教程:CSS 邊框影像
CSS 參考:border-image 屬性
CSS 參考:border-image-repeat 屬性
CSS 參考:border-image-slice 屬性
CSS 參考:border-image-source 屬性
CSS 參考:border-image-width 屬性
HTML DOM 參考:borderImageOutset 屬性