一、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> p {border: 1px solid black; margin: 1em;} .zerotest p {border: 0;} .nonetest p {border: none;} p.setwidth {border-width: 3px;} p.setstyle {border-style: dashed;} </style> <p class="zerotest"> <p class="setwidth"> "Border: 0" and "border-width: 3px" </p> <p class="setstyle"> "Border: 0" and "border-style: dashed" </p> </p> <p class="nonetest"> <p class="setwidth"> "Border: none" and "border-width: 3px" </p> <p class="setstyle"> "Border: none" and "border-style: dashed" </p> </p>
有兴趣的朋友可以复制以上代码在这个浏览器试一试:
测试结果:
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高
评论前必须登录!
注册