border:none与border:0使用区别

一、border:none
/ Q* p4 z  ^, g; Z3 Zborder-style的简写
8 K7 f# G6 V. i0 h& E在chrome审查元素看到以下结果
代码如下:
9 T1 T5 n8 o8 m! aelement.style {
- M/ Y4 Z: T$ Q# r2 `# ~. t7 gborder: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
0 z: k, e8 u+ Q$ L+ Y' e. F: }border-left-style: none;
border-width: initial;
) G1 }; d6 ?3 Q, f. R0 ?border-color: initial;
( u% G; }/ r1 |3 l}
3 D" j0 w) |! }在firefox中用firebug查看元素会看到以下结果：
" X. D" H4 [9 N8 ^代码如下:
element.style {
border: medium none;
}
注意这个medium值
二、border:0
border-width的简写
在chrome审查元素看到以下结果
; V  m. ?3 }& f$ ~代码如下:
; y" I- h/ o! Jelement.style {
border: 0;
border-top-width: 0px;
! s; c. l% `: l) V! ~: Tborder-right-width: 0px;
border-bottom-width: 0px;
6 m, ?" p' h7 H; z4 x1 p  Zborder-left-width: 0px;
border-style: initial;
/ C) G' k3 b, J$ ~& H1 Iborder-color: initial;
9 P" l; L- O; ~}
在firefox中用firebug查看元素会看到以下结果：
代码如下:
element.style {
7 k+ t4 w6 N, V% W* Hborder: 0 none;
}
注意在firebug中border:none和border:0的区别
下面举个例子来具体说明下
6 C1 S/ U6 w8 v5 K% \: K, y代码如下:
<style>
- X- a* q" |8 y# N4 H) s; [div {border: 1px solid black; margin: 1em;}
2 b6 \0 w; n, O.zerotest div {border: 0;}
/ F' K+ z. g/ p# w0 {.nonetest div {border: none;}
div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}
- k/ S/ g+ y/ f0 H2 b! b</style>
<div class=zerotest>
<div class=setwidth>
2 j$ T: s6 W' b4 {border: 0 and border-width: 3px
</div>
& _( ?4 i& M/ d) T$ b  W<div class=setstyle>
border: 0 and border-style: dashed
</div>
& D) p- n$ E8 V</div>
. J  |/ J, ^& e. k: T& E<div class=nonetest>
<div class=setwidth>
% V  S" J# J/ eborder: none and border-width: 3px
9 X; P5 L' g6 ?* T: U</div>
<div class=setstyle>
border: none and border-style: dashed
</div>
% f& j# s8 C* [. b7 l. x</div>
有兴趣的朋友可以复制以上代码在这个浏览器试一试：
4 a8 ]2 ^2 W6 ~测试结果：
/ i7 P2 ]8 G& g3 L+ a1、.zerotest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7会显示3像素的边框，这跟border:0解析有关。下面会讲到)
2、.zerotest .setstyle
+ Z3 }2 N" y8 r! `# o# z虽然定义了border-style: dashed,但是border-width:0 所以无边框
8 n! M( _8 @6 v* o  M7 b+ |3、.nonetest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7下无边框)
4、.nonetest .setstyle
. w/ k6 ^' j' ~定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(ie7下为一像素)
综合1、4可以分析出在ie7下
border:0 被解析为 border-width:0
( F  ?7 A% d9 v7 Iborder:none 被解析为 border-style:none
再来看看标准浏览器
) i4 w; G& t5 l( Mborder:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高
2 H$ y: R9 [9 \6 O8 `所以建议使用border:none来实现无边框效果
7 Z, d$ @' n& m( L" N
更多网页制作信息请查看： 网页制作

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

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

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

老大,我好崇拜你哟

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

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

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

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

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

貌似我没看懂那~~~

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

我怎么说那?~!

这是怎么了啊??

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