border:none与border:0使用区别

一、border:none
border-style的简写
在chrome审查元素看到以下结果
5 Q3 @- T$ _4 C7 d, W. Y" T5 k代码如下:
element.style {
border: none;
border-top-style: none;
1 _5 k& g$ f$ a" |+ mborder-right-style: none;
$ p8 \$ n5 ^3 l4 A0 ?; w9 f* Z; Mborder-bottom-style: none;
' `3 N( V( I/ iborder-left-style: none;
: e% Q9 ?- M* f# Nborder-width: initial;
: N% y! T9 H0 h/ k+ k6 Iborder-color: initial;
  Z- X, U. \! o}
+ l- j/ C( Z) V& ^0 n, B! V3 y在firefox中用firebug查看元素会看到以下结果：
代码如下:
) L. y) e$ A! _2 ?& f! ?' x- celement.style {
border: medium none;
% u6 ?8 e( \, y+ m6 o}
& S0 f# u* H0 a: m注意这个medium值
二、border:0
/ b5 u' p( D! ]* J% Gborder-width的简写
' G# ~$ j- i4 @在chrome审查元素看到以下结果
代码如下:
element.style {
border: 0;
! W+ j( {8 D# f- vborder-top-width: 0px;
. H8 L: S* r1 k4 |" C& y5 _6 Gborder-right-width: 0px;
border-bottom-width: 0px;
! b; N. g6 Z- Yborder-left-width: 0px;
border-style: initial;
border-color: initial;
% m9 `  w6 a$ y6 g- ]' c}
在firefox中用firebug查看元素会看到以下结果：
代码如下:
element.style {
) e3 b! _; ?* m7 xborder: 0 none;
}
2 s2 Y9 V' i- m1 G" r( \注意在firebug中border:none和border:0的区别
下面举个例子来具体说明下
代码如下:
<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
$ j7 f- ^: X. P1 D' J" z! V( `' ^.nonetest div {border: none;}
2 j  @' o. A! f7 ?2 G1 F$ t# U1 mdiv.setwidth {border-width: 3px;}
/ ^8 L% s8 D9 V( \8 _div.setstyle {border-style: dashed;}
</style>
<div class=zerotest>
5 M+ O" N1 s2 u- v$ T9 e7 ~9 e<div class=setwidth>
border: 0 and border-width: 3px
  L1 V- E2 W( R/ x8 |7 c</div>
6 @! i+ @( N/ r: t; F<div class=setstyle>
border: 0 and border-style: dashed
</div>
5 |7 j) U  M+ e</div>
0 U  V* [8 N, p9 }& B& j* Q<div class=nonetest>
<div class=setwidth>
/ D, y- g! v7 A* |( U# [* O9 `  ^border: none and border-width: 3px
</div>
3 c& F, [3 I8 S$ s# j3 w4 k<div class=setstyle>
/ L, f  h- p7 K2 Hborder: none and border-style: dashed
</div>
5 Q; F+ ~0 [. g, P! j* I</div>
有兴趣的朋友可以复制以上代码在这个浏览器试一试：
测试结果：
2 {8 O- ?' N* ?7 m( E! u9 U, z1、.zerotest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7会显示3像素的边框，这跟border:0解析有关。下面会讲到)
2、.zerotest .setstyle
虽然定义了border-style: dashed,但是border-width:0 所以无边框
( J( Q; h* l( D8 u3、.nonetest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7下无边框)
4、.nonetest .setstyle
0 M" x4 }7 E( U定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(ie7下为一像素)
5 S, p. K" c8 y+ z- U! B3 A综合1、4可以分析出在ie7下
border:0 被解析为 border-width:0
7 X5 A" C/ ?3 L7 ^; S1 k3 dborder:none 被解析为 border-style:none
: t1 w* m7 W6 v/ V再来看看标准浏览器
border:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高
: ]! L- ?# q6 R& x( U' ~所以建议使用border:none来实现无边框效果
3 }1 Z- v$ q7 A& ]1 z4 u
6 [. \6 Y0 L4 D4 a8 J更多网页制作信息请查看： 网页制作

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

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

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

老大,我好崇拜你哟

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

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

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

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

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

貌似我没看懂那~~~

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

我怎么说那?~!

这是怎么了啊??

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