CSS3 border-image Property

例

指定一個圖像元素周圍邊框：

#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;
}

試一試»

更多"Try it Yourself"下面的例子。

定義和用法

邊框圖像屬性允許您指定要用來代替元素周圍正常邊框的圖像。

邊框圖像屬性是用於設置一個速記屬性邊界圖像源，接壤形象片，邊界圖像寬度，邊框形象一開始就和邊界圖像重複屬性。

省略值設置為默認值。

默認值：	none 100% 1 0 stretch
遺傳：	no
動畫：	no. Read about animatable
版：	CSS3
JavaScript語法：	object .style.borderImage="url(border.png) 30 round" Try it

瀏覽器支持

在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。

其次通過數字-webkit-，-moz-，或-O-指定用一個前綴工作的第一個版本。

屬性
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6 3.1 -webkit-	15.0 11.0 -O-

注：請參閱下面的每個值單獨瀏覽器的支持。

CSS語法

border-image:source slice width outset repeat|initial|inherit;

屬性值

值	描述	播放
border-image-source	到圖像上的路徑被使用作為邊界
border-image-slice	如何切片圖像邊界	播放 ”
border-image-width	邊界圖像的寬度
border-image-outset	通過該邊界圖像區域延伸超出邊界框的量
border-image-repeat	無論是邊框圖像應重複，圓形或拉長	播放 ”
initial	將此屬性設置為默認值。閱讀關於初始
inherit	繼承其父元素此屬性。閱讀關於繼承

更多示例

例

不同切片值完全改變了邊框的外觀：

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -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;
}

試一試»

CSS 參考

CSS 屬性

CSS3 border-image Property

例

定義和用法

瀏覽器支持

CSS語法

屬性值

更多示例

例

相關頁面