border:none与border:0使用区别 详细介绍

一、border:noneborder-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:0border-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的区别下面举个例子来具体说明下复制代码 代码如下:stylediv {border: 1px solid
black; margin: 1em;}.zerotest div {border: 0;}.nonetest div {border:
none;}div.setwidth {border-width: 3px;}div.setstyle {border-style:
dashed;}/stylediv div “Border: 0” and “border-width: 3px”/divdiv
“Border: 0” and “border-style: dashed”/div/divdiv div “Border: none” and
“border-width: 3px”/divdiv “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:0border:none 被解析为
border-style:none再来看看标准浏览器border:0 比
border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高所以设计蜂巢建议使用border:none来实现无边框效果

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注