一、border:none
% o# m6 E% Q/ s0 S1 Y4 r8 _border-style的简写, w: C2 s0 X; x) [# p g# m+ @
在chrome审查元素看到以下结果
$ M' n8 P+ K- ~' e6 ^% V代码如下:" |4 z( |& a( T5 k* G0 W8 V9 m z
element.style {
* z% n9 ~" M" f# g) Oborder: none;
4 g6 \" l# t/ g7 w- D0 l1 H7 nborder-top-style: none;0 J+ i" Q' }/ d+ w+ f( H7 Q) Y
border-right-style: none;9 E7 a% d: m: y& a3 f
border-bottom-style: none;
# u. b8 u8 i; y$ [. t) lborder-left-style: none;9 h: u4 J" g* R. |3 l- H
border-width: initial;/ g; m! i$ q5 s+ }) l0 j% w4 x7 t
border-color: initial;8 H/ O+ k1 n( S' A4 K
}
, {" t% E# O4 R' N5 R% C在firefox中用firebug查看元素会看到以下结果：/ R+ }3 |+ s& O; Y4 t: ]9 t
代码如下:
* Q- v" c8 U) s) P, [element.style {
4 D5 V) o; A5 S8 p+ [% Y, d$ sborder: medium none;7 E# W& W- s! \ J! d$ `3 S
}3 `, ?0 K$ r- Z M: V
注意这个medium值; j" O3 d. ]4 m4 F2 t4 m" J
二、border:0
y5 S! S5 x/ ?. g3 {9 tborder-width的简写
5 |" s' E! Y% d E; p在chrome审查元素看到以下结果
" {0 C: M, ~2 y/ o代码如下:
! o" Z, |4 _+ f+ c% l- B* Delement.style {
, I& L* E' G! E) A( M( g2 oborder: 0;) |0 b% h8 o0 d7 [# x8 L& d
border-top-width: 0px;
! P5 H# C1 ]2 X0 x& w9 {( Jborder-right-width: 0px;) M+ ^+ L' p- X' O
border-bottom-width: 0px;
) c0 b5 o Y1 ~3 |5 v3 w* |border-left-width: 0px;6 o, X8 m+ i, ^
border-style: initial;2 N& f* C; W8 a5 ]6 u* F% E0 W5 J! u
border-color: initial;$ U9 C2 {! \. p# b
}) P" {* X+ r2 q$ n& C* i
在firefox中用firebug查看元素会看到以下结果：. l9 J: g; Z1 P- Y% Y/ x
代码如下:
$ b3 c! Q. v3 g3 ^6 I' [0 [element.style {
+ r t/ _7 ]+ n. m% Pborder: 0 none;4 o) _2 C6 l$ x7 T
}0 q! I7 `$ J4 G( x
注意在firebug中border:none和border:0的区别
2 U7 ] W. v! @ z) U& J( `& Q, Q下面举个例子来具体说明下
5 }9 ?. n& ]$ c) R' ^# k) L代码如下:' ` g8 T9 m0 P' O5 N4 ^$ m
<style># [" b( U1 @7 o/ O6 G Z4 R
div {border: 1px solid black; margin: 1em;}) J' }0 l' o* s9 L
.zerotest div {border: 0;}) e) `4 n7 |! K2 f5 k8 ^
.nonetest div {border: none;}' |) n Z. n) \
div.setwidth {border-width: 3px;}) r5 Z: D r" E" U& D/ r
div.setstyle {border-style: dashed;}9 C& H. D8 a& g/ l8 z. N
</style>
; Y7 a( {; ]7 [- \; z$ x- Q<div class=zerotest>& \, L5 H9 U: s
<div class=setwidth>0 i* b: B y$ B* P
border: 0 and border-width: 3px
" K8 M/ v* }5 c( o5 I6 d/ ^</div>. @. E1 L3 h1 ]5 c8 p$ x
<div class=setstyle>+ }, l+ E: P- Q; i. d+ z
border: 0 and border-style: dashed, b9 M+ U2 H+ q, ^1 l& v) O& K4 P
</div>
4 y8 l# v7 b* u</div>& E0 q5 r- ~; M; k" d" t
<div class=nonetest>
% c: A# A! f" z# s% G; b<div class=setwidth>- x* H: @4 \8 I$ D7 l6 Q* S
border: none and border-width: 3px
6 c9 o/ _9 k. u0 C9 |</div>- z, h, V2 T$ Z9 e5 \- e* N
<div class=setstyle>0 o$ C, V! F) J; o" p) I( X4 T+ [
border: none and border-style: dashed
4 ~+ b) i* O" A+ v, r</div>
1 g7 g+ N$ \: f4 ]' o</div>
$ p$ ~2 e2 h0 u( ~+ ^, F有兴趣的朋友可以复制以上代码在这个浏览器试一试：
6 j2 ^5 T% A/ D" p测试结果：
0 M$ f( l( _( j; {; K1、.zerotest .setwidth9 P" k# g7 _) z+ D% M. W' A' {
虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7会显示3像素的边框，这跟border:0解析有关。下面会讲到)
* Y& o/ T- P7 T' d# [1 l2、.zerotest .setstyle7 W7 p) S4 x- [+ ~" r; s y6 a
虽然定义了border-style: dashed,但是border-width:0 所以无边框% ?, v2 v5 D0 ^) L4 r. U
3、.nonetest .setwidth
/ W. ?' h, i$ T' p/ m* j虽然定义了border-width:3px,但是border-style:none 所以无边框(ie7下无边框)7 i# P! ?! [- R s8 G
4、.nonetest .setstyle9 Y7 z( W! W) [( G7 J% } D
定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(ie7下为一像素)5 ?. L$ N5 x9 l
综合1、4可以分析出在ie7下. [" R" w! N% v6 @% }. T) Y) G
border:0 被解析为 border-width:00 y1 W2 }" E2 z
border:none 被解析为 border-style:none& Y% O: O$ w, R3 F) W% _ g
再来看看标准浏览器$ p% B& t5 o9 M: \
border:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高
0 D2 J3 j, P& a' m- _ U4 E8 d3 E所以建议使用border:none来实现无边框效果( a1 b: r; F0 K. k" I
, h7 D* \, }. W; r; _- q更多网页制作信息请查看： 网页制作 |
|
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
