CSS3 border-image 不同浏览器的表现记录

CSS3 border-image 这篇文章说的很详细， border-image功能强大需要大家花点时间去体验，下面是我学习时候遇到的一些问题与记录，与大家一起共享。

工具：浏览器chrome21.0、opera11.5、firefox17.0

我的调试结果是chrome和firefox都已经支持标准的border-image属性不用加-moz-和-webkit-前缀，而opera还是要加前缀（-o-border-image），如果你同时使用了-webkit-border-image和border-image,他们的表现是不一样的，注意是谁覆盖了谁。Chrome里的round和repeat 结果是一样的会被截断，而firefox和opera的round和repeat表现是不一样的。

 

注意二：chrome、firefox、opera前缀样式的比较

-o-border-image 和-webkit-border-image ，可以用stretch拉伸成按钮的样子，如

-moz-border-image 和标准的完全一样可以用标准的代替，所以firefox在用stretch属性拉伸成按钮是失败的，像这样中间是背景色

总结：尽量用标准的（border-image）,但不支持拉伸成按钮样子(opera和chrome前缀样式可以)，个人觉得（border-image）属性是九宫格（不知道的看这篇）中间不平铺，不拉伸，而opera和chrome的前缀样式是九宫格中间也平铺，拉伸的。具体大家修改下面的demo来查看

	
	
		


	
round
	
stretch
	
对比前缀样式和标准样式
	
repeat
	
button
	

border.png图片

button.png图片