border:none与border:0使用区别

一、border:none
border-style的简写
在chrome审查元素看到以下结果
代码如下:
' ?, [2 j, N/ S$ P5 w9 Eelement.style {
/ H6 Q, M3 G! Q; }. p) B6 D2 R5 l+ P# Kborder: none;
border-top-style: none;
5 u7 {* Z, H( n( g7 ?' Tborder-right-style: none;
+ @0 n0 q- c, q' H. vborder-bottom-style: none;
border-left-style: none;
border-width: initial;
5 {/ P$ o# U. yborder-color: initial;
. T3 j- F, c! L) B  z: {1 a}
在firefox中用firebug查看元素会看到以下结果：
$ |  }& `. g5 B8 L0 \9 e  `代码如下:
element.style {
border: medium none;
9 Z% H- s) V' x" `9 `" K# j; Z}
注意这个medium值
二、border:0
border-width的简写
在chrome审查元素看到以下结果
代码如下:
element.style {
# Q* J% {4 j4 E$ p9 `border: 0;
# J. n$ W/ l6 Y' O: A5 [border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
" X! p/ `/ K- H) _, }& Cborder-left-width: 0px;
border-style: initial;
border-color: initial;
% Y; H- P. n; A8 i' z$ H( D}
9 P' V! N! G5 H: W: U5 h在firefox中用firebug查看元素会看到以下结果：
+ b* T" e! Z6 V. O& {代码如下:
/ Q+ t8 o, A0 Q8 t0 Eelement.style {
, U/ i. R) K; [/ V. P3 P/ Oborder: 0 none;
}
: m4 T! @4 Z9 x$ \7 i注意在firebug中border:none和border:0的区别
下面举个例子来具体说明下
: \1 f* q' x1 _. H4 M2 ^% N代码如下:
<style>
div {border: 1px solid black; margin: 1em;}
: W& i  w$ U) _, ?3 U.zerotest div {border: 0;}
' _$ W& q% k  t) l+ l4 |# n.nonetest div {border: none;}
; `' ~0 u7 H. W) M1 l$ pdiv.setwidth {border-width: 3px;}
2 x$ [3 [7 {" y. Y. |1 Adiv.setstyle {border-style: dashed;}
- R* U0 V1 e# \, K. B8 T</style>
<div class=zerotest>
+ ~0 D; a$ P! ~: i<div class=setwidth>
border: 0 and border-width: 3px
% H4 l) y  N6 h0 ]  M2 }" {</div>
# |6 y8 o  K" R<div class=setstyle>
- `0 m$ b! q. i3 |  vborder: 0 and border-style: dashed
! d# M! q4 Z9 G" Q- L( B# E</div>
" i# C. K' y9 X/ Y" c9 S  {" Y</div>
) u. y9 s" ]5 t: W% @- A<div class=nonetest>
) C# g. {/ R* Z<div class=setwidth>
9 D7 T0 N5 V" Oborder: none and border-width: 3px
" c1 X0 z! e/ r! A1 f; b/ r</div>
; j5 Z% k+ V4 |9 |7 i9 h<div class=setstyle>
- ?# Q3 f2 }8 e$ i& [7 |5 sborder: none and border-style: dashed
) z8 V, Z( T4 t" u/ S</div>
. H' K! @* }: e</div>
有兴趣的朋友可以复制以上代码在这个浏览器试一试：
测试结果：
+ T/ T% }: k0 V5 k3 b0 M5 K1、.zerotest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7会显示3像素的边框，这跟border:0解析有关。下面会讲到)
  M" F: o  }! V2、.zerotest .setstyle
虽然定义了border-style: dashed,但是border-width:0 所以无边框
3、.nonetest .setwidth
: f3 c0 ~4 V8 ^+ z, N. R虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7下无边框)
4、.nonetest .setstyle
定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(ie7下为一像素)
综合1、4可以分析出在ie7下
& a' g8 P4 }: o/ D8 z* O% bborder:0 被解析为 border-width:0
border:none 被解析为 border-style:none
; t1 `/ h7 f- S5 }1 U8 T再来看看标准浏览器
( X& z) m. @. x' H* u& K' A4 vborder:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高
  ]5 v5 n) L- S0 ~所以建议使用border:none来实现无边框效果
/ m( }0 t: w9 Z# c. y. f1 E
更多网页制作信息请查看： 网页制作

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

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

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

老大,我好崇拜你哟

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

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

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

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

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

貌似我没看懂那~~~

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

我怎么说那?~!

这是怎么了啊??

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