| 标题 | 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来实现无边框效果 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。