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

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

2
回复
1982
查看
[复制链接]

1

主题

0

帖子

26

积分

球球发

体验VIP

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

积分
26
发表于 19-4-7 13:59:41 | 显示全部楼层 |阅读模式         
XML/HTML Code复制内容到剪贴板! _7 r9 A I$ r) t0 [. O3 Y$ B( X9 _
<div class="curvedBox"> , p! O2 q; u; E- J2 |<span>) T* J/ _2 P# a2 ^6 N; a% Q" X <span class="r1"></span> ! [) v6 m! Z5 B- Z$ V<span class="r2"></span> . N7 d o [! P: ^8 E<span class="r3"></span> ' k: Q2 }9 P/ N+ c! O<span class="r4"></span> - f9 j7 O8 J1 b, W2 c. o0 K6 X6 B</span>' `+ W1 J1 y7 l' S <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. & C+ s% s% x% [1 h* @</div> : I9 e( S q/ h4 E0 i8 W# b( z<span>- A$ \( V. ~7 k" B( O <span class="r4"></span> $ [& R! V* A* D. c8 W<span class="r3"></span>; R' w$ V- k+ O$ c7 y <span class="r2"></span>! U# w& o. w4 l <span class="r1"></span> / k; Q! ^3 ~' A( w$ S' J, q</span>' [: A. K% G) A3 F/ z+ | </div> % v8 M B! g8 A* [& Q6 J5 Y
9 Q3 _% S! I8 x$ B a5 R : k9 ]- i" |0 z  CSS Code复制内容到剪贴板3 K* z. K. {( c$ R# x" W- a. {! a; ? , L/ g k% X8 Y! p7 J7 S6 K$ a3 F/ O3 W
  body{background-color:#000;} " z8 g) A/ }; c& B- f W4 ^* M, ~" m2 e7 W9 P) l   .curvedBox{ ( L/ U, k( m4 |% {0 a ' a& N9 T2 Z; D/ H  width:300px;/ q" i/ r/ s7 r6 P) |$ l ( c- u. G, J3 f6 g$ a5 m   margin: 2510px auto 0; ) v' F) s- z" U$ Q, l2 d; u! k! e: H A! P   } , |2 `+ P! \5 W7 T& v 5 p6 o1 S* `5 w. y  .curvedBox .r1,.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{3 m5 l* A: G c2 c 3 u j* h6 s4 h" f: @7 `4 _   background-color:#fff; 5 |& C- X: u' O$ q " S" q8 X7 {+ c1 D2 ?8 B4 i  display:block;7 p" M% c8 {8 H; Q1 e ]# F " ]. d- G% A n- D" u3 f2 P2 ^# L  overflow:hidden;# ]& o; Q7 F1 q 5 C& L' _3 w3 @: F M, T7 S- e   height:1px;0 P) Z) T, [ I6 ? . n. T4 v3 b C+ b- _  font-size:1px; 1 n8 Q1 V9 D' [5 r7 D+ @6 @7 z" b) t0 G' S   } ( h% y; L' w" a0 R ; K! \6 o& q) s/ p* d' Q  .curvedBox .r2,.curvedBox .r3,.curvedBox .r4{; _. E: p; _& J6 \ ' X, \# H5 l, I& w  border-width:0 1px; % C: H. I0 p/ O8 ~" c1 n4 D5 f `5 M3 y" m) J: O! b   border-left:1px solid #fff; ; M. ~/ ^3 c/ j$ H( t. j, K3 W6 u 9 i) J7 b; K7 }  border-right:1px solid #fff; $ m/ w7 W8 N/ M1 ?! F3 h4 Q; b ) ~1 Q' h! P( u# D0 X. s  } 8 w" M8 z2 y) {6 J& _" C 5 n7 i! V$ b1 [ s/ i  .curvedBox .r1{margin:0 6px;}* A6 b( l& k" G( w* P7 U# ^( b + J) P. M0 _* J9 w9 i  .curvedBox .r2{margin:0 3px;} # k f: Y/ D! O; T) V. Q. S5 [ / I1 ^' M- h- L9 N2 I3 Q2 t* V4 w  .curvedBox .r3{margin:0 2px;} 2 U7 u! W, s' `5 x$ F# w6 z9 S, f$ A& N* ]& D; b7 e: m7 c   .curvedBox .r4{4 Z2 D- ^9 P7 g* V # ?7 j3 @. E" W, p' N3 P  margin:0 1px; Z p/ G5 X! e. L- g- o. t 7 C1 B' R* R( s. y1 l   height:2px; / T4 J* B# }4 r" ~; J0 D4 W3 Q4 P! Q- k6 }* g) E1 P! p   } , B3 P# z) L2 k( j% C" \- y3 L) Z ! ] z4 p/ x- |  .curvedBox .content{3 Q4 K/ L! C8 w# i5 H6 u ) H7 ^: ^% |4 v# t! U+ L   background:#fff; 8 K* q; R( n& H2 @# O6 \# K3 K 8 i% T9 u( U1 x7 G' ]. I6 H' B  border-left:1px solid #fff;7 n9 P R! A- [/ E' W8 U, @ $ [+ I# y( b6 \" I6 {( `7 ^2 Y: A5 g   border-right:1px solid #fff;0 ^, ?# Y; u! q5 b: o / a0 A5 N" K ]1 Q& `   padding:0 5px; 5 N# v" c+ b8 c3 H' `( @1 n; i7 I3 {7 y   }
& t' J8 }) ^* z& ^+ G1 v* T: _ 4 Q% d c5 u/ V- ?  这个方法其实并不完美,其实只是利用了”无限接近”的一个概念。看放大后的图的话,可以很清楚地看到锯齿状。 3 s: U% M# X: W4 U% H9 D0 m! j. U& g* d0 c5 N# R kHKBt99z79R8qype.jpg ) u0 Y: I. e8 a6 O9 w( }. m& K7 T4 S, ^   其实把图片放大足够地倍数地话,也能看到锯齿,不过放大地倍数得相当大了。将 r1 r2 r3 r4 层叠起来,利用它们 margin(left/right) 的改变以及 border(left/right),来实现这个近似的效果。理论上,如果 rn 足够多的话,效果就会无限趋近圆弧。不过话又说回来了,多加这么多的标签和css的话,在效率上必然会存在问题,也说不上就比用图片好到哪里去。所以说,这只是提供一个思路,到底怎么用,用在哪里,还得因地制宜。1 W) Y$ E- L; s; D ! _7 }( n: q- y: c4 o  不过有第一点其实应该注意的 rn{;overflow:hidden;} 这是解决 ie 下1像素高容器的方法,ie 下当容器高度低于某些值时(如10px),即使指定6 I* R0 g( q! O ! ~, B9 b( @. O  height:1px; 得到的表现都会远高于1px,而 overflow:hidden; 是一个很好的解决方法。

0

主题

11

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 19-12-18 03:15:42 | 显示全部楼层         
我是个凑数的。。。
回复

使用道具 举报

0

主题

11

帖子

20

积分

1°伸手党

Rank: 2

积分
20
发表于 20-1-19 10:10:50 | 显示全部楼层         
有竞争才有进步嘛
回复

使用道具 举报

网站简介

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