border:none与border:0使用区别

一、border:none
& J4 j4 f( X# y4 U9 P$ K; Sborder-style的简写
在chrome审查元素看到以下结果
6 Q7 Y" L% S, u代码如下:
' H1 }6 H! K, L: v2 J: Uelement.style {
border: none;
border-top-style: none;
& E/ d5 R% d8 h1 l  ?: y3 Uborder-right-style: none;
border-bottom-style: none;
border-left-style: none;
' c. l' q2 ]' K2 }$ n0 H# Y0 Lborder-width: initial;
3 A, Z6 A2 O% h& m' vborder-color: initial;
}
  H# q) b' r1 ~- G4 b0 Z. U0 w在firefox中用firebug查看元素会看到以下结果：
# y7 K) B) ]6 E* C6 V代码如下:
element.style {
1 {* s6 U# F% ^1 }border: medium none;
}
注意这个medium值
9 ?  k6 U' Q0 }) e( \二、border:0
border-width的简写
在chrome审查元素看到以下结果
% O8 K$ ^0 a& w8 t代码如下:
element.style {
9 L) i3 `* L8 fborder: 0;
border-top-width: 0px;
5 n8 U/ g& V; }" h5 G$ dborder-right-width: 0px;
  l. ~/ ]& J* {& l! G' c$ I' P! uborder-bottom-width: 0px;
border-left-width: 0px;
1 _, y5 k( S" Q* z: v5 fborder-style: initial;
border-color: initial;
* x4 X1 C, X  G$ y& y}
在firefox中用firebug查看元素会看到以下结果：
代码如下:
9 p; N+ `3 z3 }( H) M) j$ V4 Ielement.style {
2 l2 m4 P; g3 e/ Y/ Q6 Y! Tborder: 0 none;
}
0 Q7 y0 f  i& R  D注意在firebug中border:none和border:0的区别
5 Z9 ^2 J8 ~6 W& F下面举个例子来具体说明下
代码如下:
<style>
div {border: 1px solid black; margin: 1em;}
5 j- }/ E% E* v- }9 F* U.zerotest div {border: 0;}
, P/ k* i# o/ Q# r5 L' E.nonetest div {border: none;}
* F/ e3 x& ~5 ^# k2 b; ^div.setwidth {border-width: 3px;}
4 `9 T( B) E8 H8 t  a  Kdiv.setstyle {border-style: dashed;}
3 z, [# G+ M: ~5 a7 M) M% _% ~# f</style>
<div class=zerotest>
<div class=setwidth>
border: 0 and border-width: 3px
" H7 M- R2 b1 y% ^, o9 @</div>
$ B0 m, D0 o' N  X+ Q<div class=setstyle>
) f  z' S+ f7 I( G0 o3 Sborder: 0 and border-style: dashed
4 \1 h9 [6 Y9 ~" a</div>
+ H) G1 |8 x$ ?! g& P, ?</div>
1 t+ w1 r+ @* I<div class=nonetest>
<div class=setwidth>
9 u% i3 B$ @6 uborder: none and border-width: 3px
' [1 i* I$ P+ a( `5 h</div>
/ n5 c5 U( }1 G7 a: Q<div class=setstyle>
  S3 V. q1 c1 U0 Cborder: none and border-style: dashed
' c7 K: x2 Q) p4 N& E4 w) D</div>
</div>
/ H# z/ d4 h4 X5 ^/ x- t4 t/ t有兴趣的朋友可以复制以上代码在这个浏览器试一试：
. D! ]- j- v0 K. T7 g" ?# N测试结果：
. z% a# a3 w" g1、.zerotest .setwidth
, |% Y( X* p  v: u$ }虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7会显示3像素的边框，这跟border:0解析有关。下面会讲到)
! d' g+ C1 t4 N# J6 d  K- c2、.zerotest .setstyle
! u. L( ]/ r2 ~2 g虽然定义了border-style: dashed,但是border-width:0 所以无边框
( F1 S# \! o  e, J0 V3、.nonetest .setwidth
6 N& _- S4 w5 ~. ~8 P虽然定义了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
# {, u7 S4 J+ U) N# R1 h. J% @2 O' `, ]border:none 被解析为 border-style:none
; T3 Z! q% B' M7 e5 [+ u, x' }再来看看标准浏览器
border:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高
& O' Y- s4 s) H9 I6 E所以建议使用border:none来实现无边框效果
/ U& Z' \$ X5 ]/ n0 k5 S, y7 l
, O0 S+ F3 j. L5 Y2 G* w% v更多网页制作信息请查看： 网页制作

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

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

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

老大,我好崇拜你哟

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

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

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

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

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

貌似我没看懂那~~~

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

我怎么说那?~!

这是怎么了啊??

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