無邊框用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可以分析出在ie6、IE7下：
border:0 被解析為 border-width:0
border:none 被解析為 border-style:none
再來看看標准瀏覽器
border:0 比 border:none多渲染了一個border-width:0,也就是為什么border:none的性能要比border:0高。border：none；被理解為關閉此標簽，設置為0，雖然不顯示，但是同樣占內存。
為了少渲染border-width:0，和不占用內存，這里我們寫一個兼容所有瀏覽器的最優寫法：
border：0 none；前面的0是針對ie6和ie7的兼容，后面的none是針對標准瀏覽器的。
測試了下border：0 none；和border：none 0；ie6和ie7效果一致，至於渲染的和占用內存情況的利弊分析，有待進一步的分析測試，推薦用前者。