CSS3的边框（三）

border-image有以下几个重要的属性需要了解一下：

round 会自动调整尺寸，完整显示边框图片。

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;

}

在这里，图片铺满整个

边框

。

在这里，图片被拉伸以填充该区域。