border:none与border:0使用区别

一、border:none
. s$ ^9 }# f% u  m2 ?border-style的简写
在chrome审查元素看到以下结果
代码如下:
element.style {
9 r7 n6 C$ S% n3 s6 k$ s/ O: Zborder: none;
+ `" _5 r- g) Z' D, }border-top-style: none;
border-right-style: none;
' V; \, o- O' e5 }! Hborder-bottom-style: none;
7 Q6 m- U# D& y3 M7 Rborder-left-style: none;
border-width: initial;
/ z7 N9 j; N4 ~4 }  Cborder-color: initial;
}
* s* P  q7 a$ U9 q  z: G在firefox中用firebug查看元素会看到以下结果：
5 d0 Z# T' q- T3 _* V代码如下:
4 Z2 m0 g& s* q1 i8 Xelement.style {
& s! t) k( M, ]' ~* Cborder: medium none;
$ {; h/ j; r2 D3 Q4 |}
注意这个medium值
, k; M+ \1 q, ]4 W/ [, I! k  p' k6 _二、border:0
# d1 z/ |) V9 P# B2 _border-width的简写
8 u, K$ o! ~. ^8 Q" y; g, S在chrome审查元素看到以下结果
代码如下:
element.style {
6 F8 w& h$ d8 I4 ?border: 0;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
1 @( |& P0 @+ m2 |border-left-width: 0px;
border-style: initial;
" V9 j, H6 Y. Cborder-color: initial;
}
在firefox中用firebug查看元素会看到以下结果：
代码如下:
  J9 m' f0 _; x6 ^8 velement.style {
border: 0 none;
}
$ r  X! A# M; H- X- O注意在firebug中border:none和border:0的区别
( R: M# w! @' s: V: a' _下面举个例子来具体说明下
/ m! t! M6 U; i8 s& |代码如下:
<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;}
: Y  Y4 q+ E7 P</style>
<div class=zerotest>
<div class=setwidth>
8 e% N# L0 _+ N: P, k% f. uborder: 0 and border-width: 3px
</div>
<div class=setstyle>
. L! f' J2 m8 iborder: 0 and border-style: dashed
</div>
  j$ H2 b0 r4 t! v</div>
<div class=nonetest>
<div class=setwidth>
border: none and border-width: 3px
  p' h& c# V" V: F: E</div>
' t, p! r; L/ ]4 ~, }" M: Q5 x% c- v<div class=setstyle>
0 S3 p9 e6 ?- z& W5 X) A, g- mborder: none and border-style: dashed
4 y9 b% A5 o3 e- ^4 E</div>
. ]# u- Y2 ]( |% i</div>
有兴趣的朋友可以复制以上代码在这个浏览器试一试：
测试结果：
; b/ Q( D( S3 D4 }- y- R' A4 W4 c& K0 B1、.zerotest .setwidth
0 S6 L( V  L( F虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7会显示3像素的边框，这跟border:0解析有关。下面会讲到)
- f6 L' @- j/ l( j& g2、.zerotest .setstyle
5 b3 O2 s) J: M虽然定义了border-style: dashed,但是border-width:0 所以无边框
/ p$ \+ z- H3 c. [3、.nonetest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7下无边框)
' _. y0 q9 T' K8 {) A4、.nonetest .setstyle
定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(ie7下为一像素)
+ F  K' F) ]6 B+ R2 r* A+ c综合1、4可以分析出在ie7下
border:0 被解析为 border-width:0
! M2 O0 x2 z  I1 i( Nborder:none 被解析为 border-style:none
  k" d7 _; C* d& Q/ Y  e6 `( v) O再来看看标准浏览器
- w! q% Z' Q8 V9 c* t5 a( yborder:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高
所以建议使用border:none来实现无边框效果

; I& y% M! ^# I: D, ~! q更多网页制作信息请查看： 网页制作

那个家 让它沉下去吧！ 不要啦

感谢党和人民的关爱~~~

一个个全都骑到老大头上来了...

老大,我好崇拜你哟

晕 在我帖里面找偶像啊??

本人过去、现在以及将来都不认识楼主，且自古以来与楼主无利益关系。楼主表述之事与本人无关

看完楼主的帖子，我的心情竟是久久不能平静

你这样的表现，就只配这几个字：窝囊废

晕倒`````不要造我的谣言哦~~小心我打你pp~~嘿嘿~~~~

貌似我没看懂那~~~

出来混　迟早都是要灌的——不灌水怎么混啊

我怎么说那?~!

这是怎么了啊??

下次有人骂我了...我给他还回去..