CSS3 border-image-repeat:round

浏览器参照基准:Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera11.50 and Later, IE系列不做参考

所用图片:

border-image

效果演示:

* round方式暂时只有Firefox3.6+支持

#border-image-round{
	-moz-border-image:url(skin/border.png) 27/27px round;       /* For firefox3.6+ */
	-webkit-border-image:url(skin/border.png) 27/27px round;    /* For Latest Chrome, Safari */
	-o-border-image:url(skin/border.png) 27/27px round;         /* For Latest Opera */
	border-image:url(skin/border.png) 27/27px round;            /* For Future */
}

* round与repeat的区别在于:repeat重复图片碰到边界时,如果不够或超过则被截断;round平铺图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框

CSS探索之旅