一、border:none
* s5 w- ^. {; L9 J2 q7 mborder-style的简写- _ x' d$ u2 n- ^
在chrome审查元素看到以下结果
! T) l, | ^! j0 I' ^( s) w6 [0 c g4 K代码如下:
. b1 {2 O/ q$ I/ W6 ^6 oelement.style {% a- G! x) a2 v6 B
border: none;2 b0 s6 v: C9 Q0 O4 H" f z5 f
border-top-style: none;
, j0 a% |* C+ ]3 `- K$ r, }& Xborder-right-style: none;
7 H1 r0 @* Y/ |- |border-bottom-style: none;
4 p: y9 ]7 j6 S: ^8 j& o" a1 o" Sborder-left-style: none;
. u+ ~# I& p" G; I. pborder-width: initial;
# t* X6 z4 W: V3 R1 h: H1 D8 I! Xborder-color: initial;0 G8 m! I$ p) v: N
}
g; H- O* K1 B9 Y& k在firefox中用firebug查看元素会看到以下结果：
6 J0 i3 j2 t7 _ I! _* B4 G; s代码如下:+ T: ?5 w* z9 ^/ G+ D
element.style {& x- Y% X* @5 v5 {/ a, @ X2 C: A
border: medium none; o7 q% Z L3 \/ @
}5 s/ `6 s7 m3 E
注意这个medium值4 Z& f* h" t6 O Z8 d1 V
二、border:0
0 c" j6 x7 ^/ u: n ~" fborder-width的简写
, K4 c" M: w- v- f, U4 h4 r8 d$ j! N c在chrome审查元素看到以下结果/ i7 c. I& D5 U7 i# j0 o6 p6 e
代码如下:1 S, A6 M0 o* e8 C1 q4 C
element.style {
) s3 w6 L- U6 v' D2 Gborder: 0;/ o+ g7 g' a6 g3 E; F
border-top-width: 0px;* o+ V2 c( f( }! o
border-right-width: 0px;
+ ]% H, ~; z& f8 G, c9 E8 K* `2 sborder-bottom-width: 0px;- f0 c2 m9 O, b$ p/ d: u4 Y
border-left-width: 0px;
" ^( P& N/ D; N3 N8 u2 nborder-style: initial;. ^# q8 N0 \4 D( |5 }9 R7 F
border-color: initial;
4 Z, Q: g# t( M( k7 D4 a, z( ~}
- E! v! e5 b1 H& N在firefox中用firebug查看元素会看到以下结果：) W; F: S* x8 i8 R J( T! ]! ^3 ]
代码如下:5 h7 H: e! F+ J: F6 f) X* b
element.style {
6 K) q; _6 m+ z6 [4 o! |( {9 tborder: 0 none;/ m, [3 e7 t* j' U! T- w/ u" x: G
}* _' }1 T/ h2 C
注意在firebug中border:none和border:0的区别+ j k& o' L" H) {" X8 B
下面举个例子来具体说明下
" R" u+ M* @2 d8 s代码如下:5 U4 p" ^) {* X2 b) W0 B
<style>
- A5 q9 P8 q7 f6 {1 C1 v2 Adiv {border: 1px solid black; margin: 1em;}, A3 u7 T: f( W% T* }) _: O9 v: M6 M
.zerotest div {border: 0;}
+ f+ F3 r7 q' }% ?3 L/ G.nonetest div {border: none;}
5 `) y# P, m" a$ Ldiv.setwidth {border-width: 3px;}
3 U+ b/ f* E# p2 E8 D6 idiv.setstyle {border-style: dashed;}
p5 e0 t* |9 Y</style>+ F; g: L( A. r
<div class=zerotest>
5 Q+ ~2 x" d2 ^ P4 S& n/ W4 I! Y3 x# E<div class=setwidth>
" A1 T# {. r5 D% ?) n8 Tborder: 0 and border-width: 3px/ E+ s5 e) A5 w% ?! g) M! p
</div>9 g+ N8 \* i+ U2 [$ o
<div class=setstyle>! M7 \: x6 F7 Q* o2 Q+ I
border: 0 and border-style: dashed: H" H. A. v0 k3 k
</div>+ z. @( I+ E w1 C0 R% c! t
</div>* U% Y- f4 S$ x7 Y, t1 }
<div class=nonetest>
; m) g3 f1 v1 K1 \& I<div class=setwidth>
, p. {1 a0 E& l' A1 R& ]border: none and border-width: 3px
+ q! e, d8 {. V1 h& |</div>
6 ?: g0 \; `9 V w& y8 k6 v<div class=setstyle>
5 R) l$ k/ [* Y) X# r% b0 pborder: none and border-style: dashed
' z* W+ P& k9 o) e' x, Z</div>
. B; p* g! ]9 A4 v</div>8 |% X* N v2 h& E3 r
有兴趣的朋友可以复制以上代码在这个浏览器试一试：
Z" s9 H# P/ O; G+ L+ `; x0 d测试结果：9 P/ I# a P. k5 Q4 o% B2 U0 h
1、.zerotest .setwidth, ?+ k' r% y; b# w, d
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7会显示3像素的边框，这跟border:0解析有关。下面会讲到)* G* Y o5 X- l- r8 ?- G& Q) p! E. d
2、.zerotest .setstyle
( h* Z' A- C8 M5 r0 i& Q虽然定义了border-style: dashed,但是border-width:0 所以无边框
6 X9 ], d3 ^- K9 T3、.nonetest .setwidth
4 t5 _2 g! T, p& h- i虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7下无边框)
& T' A* N/ L: H; F# q7 }6 \4、.nonetest .setstyle
# a) H7 Y7 T3 T. \; M9 M定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(ie7下为一像素)
( d2 t) F6 f: r, j |! g综合1、4可以分析出在ie7下
& v8 h: r# y9 J' o4 E$ Kborder:0 被解析为 border-width:04 ]3 T. P+ N6 G5 ?+ p/ j1 u7 T
border:none 被解析为 border-style:none! B; \( d* N7 |; p; w2 [" u5 J" H
再来看看标准浏览器2 _; |. K3 p5 g( P
border:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高
, M, J4 t( k9 i8 \7 `; ?所以建议使用border:none来实现无边框效果
/ m0 F, {. O. Z/ K% u+ C6 Q3 I2 _
* G, ?8 d. i' u* Y% x: k0 J更多网页制作信息请查看： 网页制作 |
|
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡