当前位置： 移动技术网 > IT编程>网页制作>CSS > border:none与border:0使用区别

border:none与border:0使用区别

2017年12月08日  | 移动技术网IT编程  | 我要评论
一、border:none
border-style的简写
在chrome审查元素看到以下结果

在firefox中用firebug查看元素会看到以下结果：

注意这个medium值
二、border:0
border-width的简写
在chrome审查元素看到以下结果

在firefox中用firebug查看元素会看到以下结果：

注意在firebug中border:none和border:0的区别
下面举个例子来具体说明下

有兴趣的朋友可以复制以上代码在这个浏览器试一试：
测试结果：
1、.zerotest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7会显示3像素的边框，这跟border:0解析有关。下面会讲到)
2、.zerotest .setstyle
虽然定义了border-style: dashed,但是border-width:0 所以无边框
3、.nonetest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7下无边框)
4、.nonetest .setstyle
定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(ie7下为一像素)
综合1、4可以分析出在ie7下
border:0 被解析为 border-width:0
border:none 被解析为 border-style:none
再来看看标准浏览器
border:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高
所以设计蜂巢建议使用border:none来实现无边框效果

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网