border_none与border_0使用区别
来源：
中文源码网 浏览：191 次 日期：2024-04-29 01:17:31
【下载文档: border_none与border_0使用区别.txt 】
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的区别下面举个例子来具体说明下复制代码 代码如下:
"Border: 0" and "border-width: 3px"
"Border: 0" and "border-style: dashed"
"Border: none" and "border-width: 3px"
"Border: none" and "border-style: dashed"
有兴趣的朋友可以复制以上代码在这个浏览器试一试：测试结果：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来实现无边框效果
