CSS3 border-image-width vs. border-width

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

所用图片:

border-image

* border-image有一个用于border-image-width的参数,即用来定义边框的width,不过border-image-width也可以通过border-width定义。下面有这2种方式的写法对比:

border-image-width方式:

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

border-width方式:

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