您的位置：首页 > 其它

border:none与border:0的区别

2015-05-10 17:37 246 查看
border:none与border:0的区别主要有两点：（1）性能上的差异。（2）浏览器兼容差异。

1.性能上的差异

（1）border:0。将border属性设成0，虽然边框不见了，但是浏览器依然会对border-width和border-color进行渲染，会占用浏览器的资源。
（2）border:none。将border设置成none，浏览器就不会做出渲染动作。

2.兼容性差异

在IE6和IE7中，将border设成0和将border设成none对于input标签和button标签是不一样的。
（1）将border设成0，对于所有的浏览器效果都一样。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>鬼眼邪神的博客</title>
<meta name="author" content="鬼眼邪神"/>
<style>
input,button {
border:0;
}
</style>
</head>

<body>
<input type="button" name="" value="按钮1"/>
<button type="button">按钮2</button>
</body>
</html>

显示效果如下所示：



（2）将border设成none。在IE6、7中无效，在其它浏览器中有效。代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>鬼眼邪神的博客</title>
<meta name="author" content="鬼眼邪神"/>
<style>
input,button {
border:none;
}
</style>
</head>

<body>
<input type="button" name="" value="按钮1"/>
<button type="button">按钮2</button>
</body>
</html>

在IE6、7中的显示效果：



如果想在使用border:none的同时兼容所有的浏览器，只需要加上background属性即可。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航