一、border:none
/ a# S5 [3 `1 g7 ]1 B; ^3 A# qborder-style的简写, `+ i: f5 Q4 ^+ j% P
在chrome审查元素看到以下结果
- z1 ?; I6 E9 l* s代码如下:( Y1 U$ u5 e7 s+ E# l
element.style {
* i% K# h' |9 n0 a3 k4 kborder: none;" o9 h/ B% {7 @$ N- F7 ~
border-top-style: none;
7 I& ]* ?7 v# e( _6 X9 ~" Jborder-right-style: none;+ C3 _6 r) L: X; z' Q
border-bottom-style: none;( S! t% G2 ~9 y6 y2 o/ W5 ^
border-left-style: none;; X- I4 ]( @4 R: X/ o7 m
border-width: initial;
( J8 s2 _& i1 Y; c4 ^$ rborder-color: initial;
! F7 W- F. t5 b}6 r2 u! A; C d2 \* m
在firefox中用firebug查看元素会看到以下结果：5 ]; O2 B' T. `2 n1 Z9 ]7 u
代码如下:9 F3 y/ a. d7 R; L3 W+ g
element.style {
+ ^/ Q: P \0 uborder: medium none;
! p+ d/ K( L" V5 X}3 `; z; `- K7 q3 ]/ m" M, R1 p# i) S. Z
注意这个medium值
! o4 M D4 T' L6 X' J二、border:0
- i; n# a2 J0 xborder-width的简写
3 |+ f7 V" j8 B6 m; [在chrome审查元素看到以下结果
2 U$ S# E4 a' H9 h& b+ M% ]' I& ]9 B4 o代码如下:9 r/ ?% q3 [" V
element.style {
5 V1 u$ z( u1 R2 |' _9 [* oborder: 0;$ z2 i% \- Z5 ^# J
border-top-width: 0px;
9 T! Q( H8 J3 i9 `border-right-width: 0px;
t; x, p3 Z/ e& W+ {border-bottom-width: 0px;
- a% n X0 }- }& }. Gborder-left-width: 0px;
5 D$ N( p0 I- Y: E( Zborder-style: initial;( p! I; r9 j1 x( }3 |* ~
border-color: initial;
8 g h& o, a! s- _. o( I}
$ r6 H' o1 h: V- P" B! @ K在firefox中用firebug查看元素会看到以下结果：
- ~: X0 {) H2 l9 y1 F( D代码如下:
; C4 \0 O5 R2 j( B1 ]' u; aelement.style {# C% C7 b! Y% |4 i4 E+ S/ k# T
border: 0 none;
7 i2 I, c: Z; E}
7 o1 N w$ c6 N0 w4 K% o, X- G* ?3 N注意在firebug中border:none和border:0的区别, N, z; y$ p! L, m
下面举个例子来具体说明下
8 f4 x$ O2 b( b: s8 c. {代码如下:: p4 `) z) x) {7 V2 v6 g
<style>
' R9 t2 r8 g: P. G8 m6 L' G5 |* U* ldiv {border: 1px solid black; margin: 1em;}" K1 U$ H9 C- u% S; x* s
.zerotest div {border: 0;}* F/ X; y$ ~' w* G
.nonetest div {border: none;}' v ]2 G4 R7 }/ ^- V
div.setwidth {border-width: 3px;}2 d1 J# R7 d& |8 H
div.setstyle {border-style: dashed;}
% j7 n+ W) q" b7 q5 z% g</style>% _( F- x0 P9 P5 q% `
<div class=zerotest>! N; m& M; H1 p( ~
<div class=setwidth>! e6 V* T9 W3 e* z6 t
border: 0 and border-width: 3px! N' M( v7 e7 O% I0 [
</div>% H+ X9 @- m) f; e" W$ }5 v7 i
<div class=setstyle># E/ J# B# W3 S4 N
border: 0 and border-style: dashed
6 M& t1 }! ? [$ J& P" C! d</div>3 }6 m: x- p9 g4 R m
</div>/ p) j) |. N- @, x
<div class=nonetest>$ q$ P8 x! a# y* T
<div class=setwidth>
% T7 Q! o7 m/ C9 S" M3 a# qborder: none and border-width: 3px6 i6 d9 w3 K) [" E
</div>$ l! L$ i/ R; } M
<div class=setstyle>( x$ z8 d* j' N
border: none and border-style: dashed
- U! x, K: Z2 f' Y. s7 b* v! ^) h; H3 s</div>
4 e8 ~/ K+ |. G1 B6 H$ u' e</div>
/ ~4 t/ f, ?2 M& h' ]8 Y4 p有兴趣的朋友可以复制以上代码在这个浏览器试一试：6 l) r9 a' A5 e! K
测试结果：, Z6 v% ~' T! k
1、.zerotest .setwidth7 z1 F3 v9 X" \% G8 ~2 B
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7会显示3像素的边框，这跟border:0解析有关。下面会讲到)1 y0 n# O+ e U/ J
2、.zerotest .setstyle8 V4 O1 M( p& O$ W! j3 n2 o
虽然定义了border-style: dashed,但是border-width:0 所以无边框1 p! H5 t& }5 g7 G+ l
3、.nonetest .setwidth" W2 B0 m2 g2 X- N& c
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7下无边框)
_0 u& B2 \6 t' Q) N4、.nonetest .setstyle% ^% T+ C8 n" U3 c
定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(ie7下为一像素)
# T. F) Q- |" ^$ }综合1、4可以分析出在ie7下
1 R4 V6 ^/ X! [+ s8 y' [+ _border:0 被解析为 border-width:00 U$ Z# E9 h, e9 x/ o- `
border:none 被解析为 border-style:none
2 [+ |7 \0 q$ f. `再来看看标准浏览器
1 b a6 M, w1 q7 R; E" [% n0 L5 O8 G. C8 Wborder:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高
8 ]% E0 k1 a$ x, c5 I9 Y1 l, o所以建议使用border:none来实现无边框效果
8 ?9 ]8 p& o/ N9 u* y! G* U: m3 O+ t+ Q1 |) x) ~ T
更多网页制作信息请查看： 网页制作 |
|
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡