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;
}
嘗試一下»
在此頁底部有更多的例子。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在-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