一、border:none

border-style的簡寫

在chrome審查元素看到以下結(jié)果

代碼如下:

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查看元素會看到以下結(jié)果：

代碼如下:

element.style {

border: medium none;

}

注意這個medium值

二、border:0

border-width的簡寫

在chrome審查元素看到以下結(jié)果

代碼如下:

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查看元素會看到以下結(jié)果：

代碼如下:

element.style {

border: 0 none;

}

注意在firebug中border:none和border:0的區(qū)別

下面舉個例子來具體說明下

代碼如下:

<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>

有興趣的朋友可以復(fù)制以上代碼在這個瀏覽器試一試：

測試結(jié)果：

1、.zerotest .setwidth

雖然定義了border-width:3px,但是border-style:none 所以無邊框(ie7會顯示3像素的邊框，這跟border:0解析有關(guān)。下面會講到)

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為默認(rèn)值medium border-color為默認(rèn)值black 所以會顯示3像素黑色的虛線框(ie7下為一像素)

綜合1、4可以分析出在ie7下

border:0 被解析為 border-width:0

border:none 被解析為 border-style:none

再來看看標(biāo)準(zhǔn)瀏覽器

border:0 比 border:none多渲染了一個border-width:0,也就是為什么border:none的性能要比border:0高

所以建議使用border:none來實現(xiàn)無邊框效果

更多信息請查看IT技術(shù)專欄