border:none与border:0使用区别

一、border:none
7 S; I% S# n' ^) i) H& [9 dborder-style的简写
$ n* i( I" `, F在chrome审查元素看到以下结果
代码如下:
8 q- i+ |* s& }  V2 ^1 |element.style {
border: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
# }1 ^2 s; X4 Y3 z- m1 E+ D2 gborder-left-style: none;
6 p+ h. D3 W1 ^* L! _& Bborder-width: initial;
: Y8 ?6 C/ e5 eborder-color: initial;
}
在firefox中用firebug查看元素会看到以下结果：
代码如下:
1 I0 w9 f* f& A  _7 Relement.style {
border: medium none;
}
- @/ }" q" w4 i" ?+ L注意这个medium值
二、border:0
border-width的简写
在chrome审查元素看到以下结果
代码如下:
1 j" P/ d2 i8 b1 Pelement.style {
. Y3 v# R) f3 ~, Y# {! h! W) J5 a! }border: 0;
0 M* h; A; L# R# t" Y# P& S& D) Lborder-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
/ |8 k- m! b2 f! zborder-left-width: 0px;
, f' U; {8 K- s! ~  m4 v! r% Nborder-style: initial;
: N0 A* V3 @7 q. H8 P0 Z: f  tborder-color: initial;
}
在firefox中用firebug查看元素会看到以下结果：
代码如下:
& f# J* E# |& ^& [4 Z0 Z6 Kelement.style {
  u9 |: x# z- a" p9 [  }border: 0 none;
}
* }* m- `+ @* x) T7 U! y; D3 ?注意在firebug中border:none和border:0的区别
7 l0 u& A, g0 ]( t+ F下面举个例子来具体说明下
0 h% ~+ `; ~+ }$ g; J% r+ x' i代码如下:
<style>
/ q5 n; ]& A: s# J0 f( Pdiv {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
2 t  V; [/ y/ s. T3 p.nonetest div {border: none;}
div.setwidth {border-width: 3px;}
) Q2 L1 V: s0 T% k# U" Qdiv.setstyle {border-style: dashed;}
, }, l7 F( v. b) r</style>
. j8 Q" Y, N: {. u% \<div class=zerotest>
+ _5 {' c. m8 @. a7 t<div class=setwidth>
border: 0 and border-width: 3px
* t  I$ }& k# L: \</div>
<div class=setstyle>
border: 0 and border-style: dashed
</div>
</div>
6 b. G7 p6 {, l; n* I3 m6 F# c<div class=nonetest>
<div class=setwidth>
border: none and border-width: 3px
</div>
<div class=setstyle>
border: none and border-style: dashed
  I) V8 F3 u' s$ n- n</div>
' W( S; c2 V: Q; A! h+ x4 h5 U8 u</div>
7 k  M/ N0 d+ H5 U有兴趣的朋友可以复制以上代码在这个浏览器试一试：
& g: |' f/ b, W测试结果：
. j) {. W+ a0 ]1、.zerotest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7会显示3像素的边框，这跟border:0解析有关。下面会讲到)
5 |2 u( ^4 q3 v% @# x2、.zerotest .setstyle
虽然定义了border-style: dashed,但是border-width:0 所以无边框
1 c8 z2 V3 m# n  J/ Q$ u+ |/ L3 D2 E3、.nonetest .setwidth
4 O4 g* {8 T' I7 T1 t% Q  f( S! r虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7下无边框)
4、.nonetest .setstyle
定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(ie7下为一像素)
# h) Y( ?( }, a综合1、4可以分析出在ie7下
8 F  r% J# p) q+ X0 Y6 Kborder:0 被解析为 border-width:0
" z) Y+ b$ V; H9 F5 ]4 i' L# yborder:none 被解析为 border-style:none
再来看看标准浏览器
border:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高
3 m; J0 V/ T+ o' ]; k& V' ]. W7 o所以建议使用border:none来实现无边框效果

更多网页制作信息请查看： 网页制作

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

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

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

老大,我好崇拜你哟

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

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

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

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

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

貌似我没看懂那~~~

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

我怎么说那?~!

这是怎么了啊??

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