定義和(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)。 |