border:none与border:0使用区别

2016-06-13

　　一、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>

　　　　　　"Border: 0" and "border-width: 3px"

　　　　</div>

　　　　　　"Border: 0" and "border-style: dashed"

　　　　</div>

　　　　　　"Border: none" and "border-width: 3px"

　　　　</div>

　　　　　　"Border: none" and "border-style: dashed"

　　　　</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来实现无边框效果

本文关键词：