神马文学网圆角边框
来源：百度文库 编辑：神马文学网 时间：2024/04/30 07:17:07
CSS圆角边框
上一篇 / 下一篇 2008-05-05 16:45:21 / 个人分类：技术交流
查看( 1472 ) / 评论( 8 ) / 评分( 17 / 6 ) 中国经济网 经济博客Al_/f {1。用CSS设计圆角中国经济网 经济博客8jk8?T5p
5taN)Z2m&D0一般来说，基于CSS的圆角技术分为带图片和不带图片两大类。在这当中，又有使用JavaScript的和不使用JavaScript的之分。所以也是各有千秋，互有利弊。还有就是，处理出来的圆角有的是有锯齿的，甚至还有人就利用锯齿来做圆角，于是就有人挑战要做成无锯齿的圆角。总之，新技术在不断出现，新战友挑战老战友，仅仅这个CSS圆角技术就够热闹了。中国经济网 经济博客]h*BT&A8d
*BJ3o?*? U]*o0使用图片的圆角一般结构相对简单，而不使用图片的则经常是层层相套的div。在页面使用JavaScript有时候也不是那么讨人喜欢。所以，我希望能找到一个不用图片，不用JavaScript，并且结构简单的方法，如果可能的话，消除锯齿最好(废话!)。中国经济网 经济博客n m4],A6~
1G!E8cF$M k#X0
这就不是件容易的事了。不过我还是找到了：就是 Spiffy Corners ！它符合我的所有条件：纯CSS，没有JavaScript，结构紧凑简洁，没有锯齿，当然也不用图片。最好玩的是，作者把这个技术单独做成一个网站。中国经济网 经济博客 h#H(_7EB9Po4q
下面是结构和CSS，也就是这个页面。你在他的网站可以随意改动颜色做尝试。
#d"X'c sF(e.q0d"k-G_ [X,F^0.spiffy{
7S"o;dM0~L.Gp0display:block;中国经济网 经济博客*f&u/m EG"BwG
}
} [%o1vEyK0.spiffy *{
3GJ*DS-?,D%i8g0display:block;
X*K@lPQ'gA-D0height:1px;中国经济网 经济博客iTW,IVA ]
overflow:hidden;
!q3TW TW0background:#0a67e6;中国经济网 经济博客 y8u t0f nb
}
\7Gm y h5f:|+z z wdi0.spiffy1{中国经济网 经济博客'Q1R7Xw'|0v `1oT
border-right:1px solid #95bdf4;中国经济网 经济博客6e e ?1i%n(h A(e |p1j
padding-right:1px;
*`HgoP)S0margin-right:3px;
T"B!tX H){K0border-left:1px solid #95bdf4;
L?^"f ]!aI S.h,G0padding-left:1px;
Fdd/A-C1^ u*R5q5t0margin-left:3px;中国经济网 经济博客 f0jY"[e z2pJY]
background:#478dec;中国经济网 经济博客:b*f m*K7D j'}^C TH7gi
}
{%?+A3l3n @#\%C1H"o0.spiffy2{
9WFb-o E b9k0G w0border-right:1px solid #e6effc;中国经济网 经济博客!|@U1} tc)s%sb p
border-left:1px solid #e6effc;
0H!W(J } ] N{0padding:0px 1px;
s@0u+q7~.fG0background:#3883ea;
a;Ds5xJ O i0margin:0px 1px;
S pn0_5{Z;g0}中国经济网 经济博客"j+h k iL1x0u
.spiffy3{中国经济网 经济博客1Tg z f F,R E
border-right:1px solid #3883ea;
` Tr F.x k*{0border-left:1px solid #3883ea;中国经济网 经济博客)A7f L(q1S/]}p OjW
margin:0px 1px;中国经济网 经济博客+T7~:f Oj,\V'L(WJQ&Z
}
H*e%q\E t6@D+hdy0.spiffy4{中国经济网 经济博客#dRS @H3FX
border-right:1px solid #95bdf4;
8c]R\g` P NO0border-left:1px solid #95bdf4;
Tr3^$u$IH0}中国经济网 经济博客m$^2X0@ vKe x'AAd8Z
.spiffy5{中国经济网 经济博客U[ iw?$|
border-right:1px solid #478dec;中国经济网 经济博客,[I1tERp G d?4L
border-left:1px solid #478dec;
C(Bp2b:[zP0}中国经济网 经济博客3U5K'ef'f SF
.spiffy_content{
2K&E'X.GN tx ])e0padding:0px 5px;中国经济网 经济博客&M0u#O/SV
background:#0a67e6;中国经济网 经济博客 \nv7D9y3xTp
}
2MZ!i!V|q Z d0中国经济网 经济博客oWwm.[e5P
f+guG%C h0
FL0O`&B&O S H0中国经济网 经济博客 D6U/J-V&[C Y {(r Lr
a V h$aq3UXL!t0中国经济网 经济博客/I!l*|Sj6F]/vV:j z
中国经济网 经济博客+A-f"L1@/yA yy `anF
d8m s8X@ T+T4Q0
9sFf-w.{pb0
i3DG,M+E(y03X a.j4e1z lW3y ]0
&NT b)r H \C;xD,x1u0中国经济网 经济博客KY7L[oU4~
中国经济网 经济博客0g` L1z zj#Y$[/m
中国经济网 经济博客2X%G-P,P4h+R|M1q"M
$o$o By `m @@-~s9S0
iw mWI#R0中国经济网 经济博客 RmZ.M'Hv
/n\8_:v E.e F0
;T ? l5cnm+l|0
'Id t mKw02.用CSS实现无图片圆角效果中国经济网 经济博客}(x6DeI m#gsIM
,])Y8g'lV,x y9OM0css圆角效果，IE6, firefox均显示正常中国经济网 经济博客&O,E0hn O){S6S
(]G"F%K$U/^*A0＜html＞中国经济网 经济博客cP{-xM
＜head＞中国经济网 经济博客pk.a5`~8a
＜title＞css圆角效果--七度空间网页教学网＜/title＞中国经济网 经济博客L)wHsn*uc
＜meta. http-equiv="content-type" content="text/html; charset=gb2312"＞中国经济网 经济博客:Y'd$E#leE2k]t
＜style. type="text/css"＞
D.d!U PE$|mj{0div.RoundedCorner{background: #9BD1FA}中国经济网 经济博客$@Lf S#qI)_,m
b.rtop, b.rbottom{display:block;background: #FFF}
$u'nlf(Z0b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}中国经济网 经济博客 J)I ~|#U ~y
b.r1{margin: 0 5px}
0c3}%R2y4w~)W-l0b.r2{margin: 0 3px}中国经济网 经济博客 ZnU r} w+K(GP
b.r3{margin: 0 2px}
s/Qg'Df+j4b0b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
A&c-e[ B+cM2F0＜/style＞
Ti L5[Q3FqW0＜/head＞
#hmF3{|\ F@P0＜body＞中国经济网 经济博客/`koy+Un!eR o$e [
＜div class="RoundedCorner"＞中国经济网 经济博客Y3F0B+^z kx:D
＜b class="rtop"＞＜b class="r1"＞＜/b＞＜b class="r2"＞＜/b＞＜b class="r3"＞＜/b＞＜b class="r4"＞＜/b＞＜/b＞
]4S0QU4v&g6n*Y:}8Q0＜br＞无图片实现圆角框＜br＞＜br＞
z"va v h0＜b class="rbottom"＞＜b class="r4"＞＜/b＞＜b class="r3"＞＜/b＞＜b class="r2"＞＜/b＞＜b class="r1"＞＜/b＞＜/b＞
#O4O$?ogoA(VAw0＜/div＞中国经济网 经济博客3o\ b'c&?d5p
＜/body＞
Y6p _ N:M1f f6~9v0＜/html＞中国经济网 经济博客j C!\ h }d9Cq
{R8Z8R#g$h/M#t%a0将上面的代码保存成html格式的文档，用浏览器打开即可看到效果。
R XfvS!k0中国经济网 经济博客)e?9^[nh$xHI%M5in,R)}2A0中国经济网 经济博客X ?3w-j!v
3。
c4~} u'dV0&@~1O v8hE9R0圆角CSS：
:X kCAp } I.Oq$wU"{O#Z0
C)hHR(I^8k1E0.r0 {font-size:12px;width:80%;}中国经济网 经济博客)}!nv4OQ"~KR
.r1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}
~ X-P_W+hH0.r2 {height:1px; font-size:1px; overflow:hidden; display:block; border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
r-o,u8{8X R$e2d0.r3 {height:1px; font-size:1px; overflow:hidden; display:block; border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}中国经济网 经济博客A\ Y,pr;Mi^@2]
.r4 {height:2px; font-size:1px; overflow:hidden; display:block; border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}中国经济网 经济博客)I x7`9uHq
.r5 {border-right:1px solid #000; border-left:1px solid #000; padding:0px 5px 0px 5px;}
jS.Y y8U r a4G |4vE0
+U*r!A(HT8_n_0使用方法：
[tx:^%JP9? z Ys l0
中国经济网 经济博客 nlb\[ J(g
中国经济网 经济博客 [ LMS6}/jK
中国经济网 经济博客t:?jXDV,S
中国经济网 经济博客:}7ZgG0Z4E$I3Y
EPEdS&u(e)| l7a0
q9~8w?$[4k0i W3xN2V0
Y.P.c(xOnU0
MK~ @ j3Q)}8{3s@}0
4c:])vP ecUgv0