CSS3 border-image-repeat:stretch|repeat|round 以混合方式处理边框图片

浏览器参照基准:Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53暂不支持, IE系列不做参考

所用图片:

border-image

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

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

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

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

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

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

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

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

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

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

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

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