css中border:none与border:0有什么区别?

发布时间:2020-06-08编辑:脚本学堂
本文介绍了css中border:none与border:0用法上的区别,有需要的朋友参考下。

在css中,无边框用border:none还是border:0一直都是一个热议的问题,两者除了在渲染性能上面的差别以为,在标准浏览器中页面表现是没有任何差别的。

来一起认识一下它们本质上有哪些区别?

一、border:none
border-style的简写
在chrome审查元素结果:
 

复制代码 代码示例:
element.style {
border: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: initial;
border-color: initial;
}
 

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

复制代码 代码示例:
element.style {
    border: medium none;
}

注意这个medium值。

二、border:0
border-width的简写
在chrome审查元素看到以下结果:
 

复制代码 代码示例:
element.style {
border: 0;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-style: initial;
border-color: initial;
}
 

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

复制代码 代码示例:
element.style {
    border: 0 none;
}
 

注意:在firebug中border:none和border:0的区别。
例子,
 

复制代码 代码示例:
<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}
div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}
</style>
<div class="zerotest">
<div class="setwidth">
"border: 0" and "border-width: 3px"
</div>
<div class="setstyle">
"border: 0" and "border-style: dashed"
</div>
</div>
<div class="nonetest">
<div class="setwidth">
"border: none" and "border-width: 3px"
</div>
<div class="setstyle">
"border: none" and "border-style: dashed"
</div>
</div>
 

测试结果:
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来实现无边框效果。