border:none與border:0使用區別

 無邊框用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來實現無邊框效果