border-image有以下幾個重要的屬性需要了解一下:
round 會自動調(diào)整尺寸,完整顯示邊框圖片梳庆。
repeat 單純平鋪多余部分,會被“裁切”而不顯示。
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(/i/border.png) 30 30 round;/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;/* Opera */
border-image:url(/i/border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;/* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
在這里牛柒,圖片鋪滿整個
。
在這里痊乾,圖片被拉伸以填充該區(qū)域皮壁。