CSS3 border-image-repeat:[stretch|repeat|round]{1,2}

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

所用图片:

border-image

效果演示 - 水平方向拉伸(stretch),垂直方向重复(repeat):

#border-image-stretch-repeat{
	-moz-border-image:url(skin/border.png) 27/27px stretch repeat;
	-webkit-border-image:url(skin/border.png) 27/27px stretch repeat;
	-o-border-image:url(skin/border.png) 27/27px stretch repeat;
	border-image:url(skin/border.png) 27/27px stretch repeat;
}

效果演示 - 水平方向拉伸(stretch),垂直方向平铺(round):

#border-image-stretch-round{
	-moz-border-image:url(skin/border.png) 27/27px stretch round;
	-webkit-border-image:url(skin/border.png) 27/27px stretch round;
	-o-border-image:url(skin/border.png) 27/27px stretch round;
	border-image:url(skin/border.png) 27/27px stretch round;
}

效果演示 - 水平方向重复(repeat),垂直方向拉伸(stretch):

#border-image-repeat-stretch{
	-moz-border-image:url(skin/border.png) 27/27px repeat stretch;
	-webkit-border-image:url(skin/border.png) 27/27px repeat stretch;
	-o-border-image:url(skin/border.png) 27/27px repeat stretch;
	border-image:url(skin/border.png) 27/27px repeat stretch;
}

效果演示 - 水平方向重复(repeat),垂直方向平铺(round):

#border-image-repeat-round{
	-moz-border-image:url(skin/border.png) 27/27px repeat round;
	-webkit-border-image:url(skin/border.png) 27/27px repeat round;
	-o-border-image:url(skin/border.png) 27/27px repeat round;
	border-image:url(skin/border.png) 27/27px repeat round;
}

效果演示 - 水平方向平铺(round),垂直方向拉伸(stretch):

#border-image-round-stretch{
	-moz-border-image:url(skin/border.png) 27/27px round stretch;
	-webkit-border-image:url(skin/border.png) 27/27px round stretch;
	-o-border-image:url(skin/border.png) 27/27px round stretch;
	border-image:url(skin/border.png) 27/27px round stretch;
}

效果演示 - 水平方向平铺(round),垂直方向重复(repeat):

#border-image-round-repeat{
	-moz-border-image:url(skin/border.png) 27/27px round repeat;
	-webkit-border-image:url(skin/border.png) 27/27px round repeat;
	-o-border-image:url(skin/border.png) 27/27px round repeat;
	border-image:url(skin/border.png) 27/27px round repeat;
}
CSS探索之旅