CSS3 border-image 屬性
實例
指定作為div元素周圍邊框的圖像：
#borderimg {
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
在此頁底部有更多的例子。
流覽器支持
表格中的數字表示支持該屬性的第一個流覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該首碼屬性的第一個流覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
屬性定義及使用說明
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 slice width outset repeat|initial|inherit;
| 值 | 描述 |
|---|---|
| border-image-source | 用於指定要用於繪製邊框的圖像的位置 |
| border-image-slice | 圖像邊界向內偏移 |
| border-image-width | 圖像邊界的寬度 |
| border-image-outset | 用於指定在邊框外部繪製 border-image-area 的量 |
| border-image-repeat | 用於設置圖像邊界是否應重複（repeat）、拉伸（stretch）或鋪滿（round）。 |
更多實例
圖像按鈕
這個例子演示了如何創建一個border-image 屬性的按鈕。
相關文章
CSS3 教學: CSS3 邊框