腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

[其他] 利用css实现圆角图形绘制

0
回复
1548
查看
[复制链接]

1

主题

0

帖子

26

积分

球球发

体验VIP

Rank: 28Rank: 28Rank: 28Rank: 28Rank: 28Rank: 28Rank: 28

积分
26
发表于 19-4-7 13:59:41 | 显示全部楼层 |阅读模式         
XML/HTML Code复制内容到剪贴板" Z4 A& U$ E6 r# R1 _
<div class="curvedBox">; j8 F6 B; j% n# q$ t8 X, [# C <span> 9 ?2 B! b+ `, U$ w/ B<span class="r1"></span>" v& V7 y% F A& g% u2 G7 x <span class="r2"></span>% s; x/ y# C6 M5 f" K <span class="r3"></span> - i' [7 i8 U6 _7 C<span class="r4"></span>* _8 K K" ^2 i6 P' H </span># C4 t7 q" Q& }& A) A! d9 y8 y5 O <div class="content"> Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems. . g- s+ e2 J4 Q) Z2 \8 W</div>3 c# I: V/ e! ?# O' p- U5 U: q <span> " n+ u7 B# A/ c0 L+ Y. q5 a<span class="r4"></span> 8 [- e6 C7 b7 X; w- B<span class="r3"></span> , P7 S7 O( O0 c. j<span class="r2"></span> / J6 j: O& d' D3 m; w; e<span class="r1"></span>8 |% S: x5 X7 v2 A/ N </span> # \2 s: F) Z& d</div>$ o# _+ a/ J# m% b5 h9 ^5 Y
' {6 {# V' }+ q, e, e. I3 D1 I" q O- `& @4 n: r% Q* s   CSS Code复制内容到剪贴板; L- K+ U' B) r2 A ^ . k! I/ o. N( b# X2 ]$ B7 w
  body{background-color:#000;} / H( d- ]% X7 T% B4 ^! r . c; x4 A+ w2 T) x" g* ~" E7 D* C  .curvedBox{+ E$ r0 c( W9 j * G8 _" }9 U+ U; _  width:300px;" g8 n+ l s6 c, t/ @/ q 6 Y" `1 I W6 q: y h  margin: 2510px auto 0;% D* z0 Z; D2 u' M; ^1 j$ d3 `) p5 U ; k& r+ {* R0 l# e" j+ C  }( d! y9 B0 d+ c3 }/ H; Q 9 G" Y. U( m6 l/ D0 J# f8 o   .curvedBox .r1,.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{6 f9 z: L/ C5 ^ : a% i9 i5 i1 [1 W  background-color:#fff; ! ^# R& i0 s3 K; J- C% m; `% V) h' t   display:block; $ o3 s! C1 Q1 K7 M8 W" g% a, c4 n( S. j+ h" Y2 a& M+ x   overflow:hidden; 4 f/ V7 |& H# d5 t2 U# r" R : F3 g. \ h8 M$ y; c  height:1px;- `+ g) D6 {4 b6 h1 t + }" O g5 G/ i0 _3 ]   font-size:1px;9 e2 p; r- A" G; M% s# G8 p ) l& i6 ]/ g) ^$ Q. U   } # c; Q8 y, L) w6 N5 z6 V/ R0 Y' J: V3 n7 l   .curvedBox .r2,.curvedBox .r3,.curvedBox .r4{ ) w4 C- F0 q0 b& h& {) m' Y 6 V) x8 x5 x, i f" A+ Q- Q  border-width:0 1px;) `6 M! a, j+ k3 x# y + }' m6 u- x" Z/ Q$ V  border-left:1px solid #fff; ) Q) M0 j$ R& h( E8 R6 G. @! O% @& d* j% F! O0 {4 z: {   border-right:1px solid #fff;) P! O$ o V y8 T" h. f8 O% R0 { ( {' P* u+ I; z( D9 G  } 0 n$ g* D8 D5 z" n $ g! ` L! [; U( e3 Z4 ]/ i  .curvedBox .r1{margin:0 6px;}. `( D+ k: [" y; y7 c6 T4 J) ] 7 f- s4 M: c1 b& `  .curvedBox .r2{margin:0 3px;}) }; k% \# r' Q! n3 ? 8 o# q/ H4 _8 j2 W: Z/ v   .curvedBox .r3{margin:0 2px;} 5 ]3 N& T6 k7 o Y( D/ Z5 }- v# V7 N3 j3 y o; F   .curvedBox .r4{ ; g$ ? J; a8 m$ j& \0 T1 ^7 v+ r$ `   margin:0 1px; , ?7 U% u& K/ O' Y; a! M: K/ [$ m) S4 q8 g7 y1 L# M# N( k   height:2px;, N5 N6 S! b! E) _9 L u7 ? 6 d; U+ l) Q5 H0 N' e% ~   } 5 p9 a! y/ a# ?' {3 k. } ! I3 p0 o; F! A! c2 W' E0 T( N  .curvedBox .content{/ t* X; \: m a8 D6 n # M! `; h. a( ~9 G/ ?# f5 @. q$ P! B  background:#fff;7 r. ]! _6 H+ }8 P, y" @# u 3 |0 t) S" P6 J" X& D9 y  border-left:1px solid #fff;3 h1 ^, \. r" R, n* M( y: c # Z' r, g& ~% ~% K9 F8 F   border-right:1px solid #fff; ( T. o+ g' C) K* G, u @8 y, {+ C! u6 r2 e  padding:0 5px;2 `* _: p* p- E$ P3 W0 u 8 u- |" u, A1 D; E  }
$ i8 A1 Z1 x) f0 k2 P, q $ y( m; K* ?7 ?* ]* W' x  这个方法其实并不完美,其实只是利用了”无限接近”的一个概念。看放大后的图的话,可以很清楚地看到锯齿状。9 u$ B; E2 z/ I1 m5 Z; l+ U/ S f0 t Z5 q- Y& E kHKBt99z79R8qype.jpg : J3 m0 N0 o0 G( T" O6 P   其实把图片放大足够地倍数地话,也能看到锯齿,不过放大地倍数得相当大了。将 r1 r2 r3 r4 层叠起来,利用它们 margin(left/right) 的改变以及 border(left/right),来实现这个近似的效果。理论上,如果 rn 足够多的话,效果就会无限趋近圆弧。不过话又说回来了,多加这么多的标签和css的话,在效率上必然会存在问题,也说不上就比用图片好到哪里去。所以说,这只是提供一个思路,到底怎么用,用在哪里,还得因地制宜。 7 M$ B4 e; u& l) [$ R 0 p5 e" b1 M+ P, T% x5 W7 a& o  不过有第一点其实应该注意的 rn{;overflow:hidden;} 这是解决 ie 下1像素高容器的方法,ie 下当容器高度低于某些值时(如10px),即使指定 3 y( x% G$ F M2 \2 r4 h # U7 j4 H' C7 u  height:1px; 得到的表现都会远高于1px,而 overflow:hidden; 是一个很好的解决方法。
网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除