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

最新推荐文章于 2023-09-13 13:54:37 发布

todothink

最新推荐文章于 2023-09-13 13:54:37 发布

阅读量6k

点赞数

分类专栏： html5&css3 文章标签： -webkit-border-image border-image css3

本文链接：https://blog.csdn.net/jjbob77/article/details/8263073

版权

html5&css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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来查看

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	div{
		width: 120px;
		border: 15px solid #3c0;
		margin-bottom: 10px;
		padding: 10px 20px;

	}
	#round{	
		-o-border-image: url("images/border.png") 27 round;
		border-image: url("images/border.png") 27 round;
		/*-webkit-border-image: url("images/border.png") 27 round;*/
	}
	#stretch{
		
		-o-border-image: url("images/border.png") 27 stretch;
		border-image: url("images/border.png") 27 stretch;
		/*-webkit-border-image: url("images/border.png") 27 stretch;*/
	}
	#stretch1{
		/*修改裁剪大小和属性来调试,不要注释最后一条结果不一样哦*/
		
		-o-border-image: url("images/border.png") 15 stretch;
		-moz-border-image: url("images/border.png") 15 stretch;
		-webkit-border-image: url("images/border.png") 15 stretch;
		/*border-image: url("images/border.png") 15 stretch;*/ 
	}
	#repeat{
		-o-border-image: url("images/border.png") 27 repeat;
		border-image: url("images/border.png") 27 repeat;
		/*-webkit-border-image: url("images/border.png") 27 repeat;*/

	}
	#button{
		width:40px;
		border-image: url("images/button.png") 0 12/10px ;	
		-o-border-image: url("images/button.png") 0 12/10px ;
		-moz-border-image: url("images/button.png") 0 12/10px  ;
		-webkit-border-image: url("images/button.png") 0 12/10px ;
	}
	</style>	
</head>
<body>
	<div id="round">round</div>
	<div id="stretch">stretch</div>
	<div id="stretch1">对比前缀样式和标准样式</div>
	<div id="repeat">repeat</div>
	<div id="button">button</div>
	
</body>
</html>

border.png图片