編程教程CSS3 border-image 屬性
CSS3border-image屬性
實例
指定作為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;
}
{
-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;
}
在此頁底部有更多的例子。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -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;
| 值 | 描述 |
|---|---|
| border-image-source | 用于指定要用于繪制邊框的圖像的位置 |
| border-image-slice | 圖像邊界向內偏移 |
| border-image-width | 圖像邊界的寬度 |
| border-image-outset | 用于指定在邊框外部繪制 border-image-area 的量 |
| border-image-repeat | 這個例子演示了如何創建一個border-image 屬性的按鈕。 |
更多實例
圖像按鈕
這個例子演示了如何創建一個border-image 屬性的按鈕。
相關文章
CSS3 教程: CSS3 Borders