做自(zì)由與創造的先行者

CSS border-image 屬性

CSS中文(wén)手冊

定義和(hé)用(yòng)法

border-image 屬性是一個簡寫屬性,用(yòng)于設置以下(xià)屬性:

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

如果省略值,會(huì)設置其默認值。

提示:請(qǐng)使用(yòng) border-image-* 屬性來(lái)構造漂亮(liàng)的可伸縮按鈕!

實例

将圖片規定爲包圍 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;

}

頁面底部有更多實例。

CSS 語法

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

屬性值

描述
border-image-source 用(yòng)在邊框的圖片的路徑。
border-image-slice 圖片邊框向内偏移。
border-image-width 圖片邊框的寬度。
border-image-outset 邊框圖像區(qū)域超出邊框的量。
border-image-repeat 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發
下(xià)一篇:CSS border-image-outset 屬性
上(shàng)一篇:CSS border-color 屬性