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;
}
頁面底部有更多實例。
瀏覽器支持
Firefox、Chrome 以及 Safari 6 支持 border-image 屬性。
Opera 支持替代的 -o-border-image 屬性。
Safari 5 支持替代的 -webkit-border-image 屬性。
定義和用法
border-image 屬性是一個簡寫屬性，用于設置以下屬性：
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
如果省略值，會設置其默認值。
提示：請使用 border-image-* 屬性來構造漂亮的可伸縮按鈕！
| 默認值： | none 100% 1 0 stretch |
|---|---|
| 繼承性： | no |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.borderImage="url(border.png) 30 30 round" |
可能的值
| 值 | 描述 | 測試 |
|---|---|---|
| border-image-source | 用在邊框的圖片的路徑。 | |
| border-image-slice | 圖片邊框向內偏移。 | |
| border-image-width | 圖片邊框的寬度。 | |
| border-image-outset | 邊框圖像區(qū)域超出邊框的量。 | |
| border-image-repeat | 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 | 測試 |
親自試一試 - 實例
- Border-image 按鈕
- 本例演示如何通過 border-image 屬性來創(chuàng)建按鈕。
相關頁面
CSS3 教程：CSS3 邊框