免費AI編程助手
CSS3 border-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;
}
嘗試一下 ?
在此頁底部有更多的例子。
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| 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屬性是速記屬性用于設(shè)置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值.
省略的值設(shè)置為它們的默認(rèn)值。
提示: 使用border-image-*屬性來構(gòu)建美麗的可擴(kuò)展按鈕！
| 默認(rèn)值: | 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 | 圖像邊界向內(nèi)偏移 |
| border-image-width | 圖像邊界的寬度 |
| border-image-outset | 用于指定在邊框外部繪制 border-image-area 的量 |
| border-image-repeat | 這個例子演示了如何創(chuàng)建一個border-image 屬性的按鈕。 |
更多實例
圖像按鈕
這個例子演示了如何創(chuàng)建一個border-image 屬性的按鈕。
相關(guān)文章
CSS3 教程: CSS3 Borders
更多建議：