CSS3 border-image-repeat:round　水平和垂直方向均以平铺(round)方式处理边框图片

浏览器参照基准：Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53暂不支持, 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 */
	border-image:url(skin/border.png) 27/27px round;            /* For Future */
}

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

© Copyright Doyoe.com