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的區別
下面舉個例子來具體說明下

複製程式碼 程式碼如下:

"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:0
border:none 解析為border-style:none
再來看看標準瀏覽器
border:0 比border :none多渲染了一個border-width:0,也就是為什麼border:none的效能要比border:0高
所以設計蜂巢建議使用border:none來實現無邊框效果