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

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

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

1

主题

0

帖子

26

积分

体验VIP

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

积分
26
        
发表于 19-4-7 13:59:41 | 显示全部楼层 |阅读模式
XML/HTML Code复制内容到剪贴板 / g1 L2 }" S. F B7 ^; S* z
<div class="curvedBox"> & d3 P) x# K( C<span> , B' c0 X# N% X9 U<span class="r1"></span>8 o# x9 T9 a. ]8 ~6 G8 K8 a) U <span class="r2"></span> 9 z4 k( X2 {% L! a* M<span class="r3"></span> b7 T9 _5 [+ C. E, p. w0 `: ~! J<span class="r4"></span>: h" z, y7 f& d( Q: m i3 l </span> . r" U E; l& |+ T<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. 9 e9 q U% g: P, C* E</div> W' I8 B3 }) w$ m/ t3 j5 _ <span> 4 [4 u5 I+ l# o<span class="r4"></span> * ^5 m/ n( U5 f1 s<span class="r3"></span> 2 t9 \5 Z* V# c3 s/ f<span class="r2"></span>" r8 q1 Q# h+ A <span class="r1"></span> - ]: m! B) m; h! v# P, ^1 E) ^</span> ; E7 l' g" {5 M3 D6 x, z$ K</div> , R% x8 a. D; ?. O' q# ]
! \( ~5 y. m7 f" d 4 p+ B" c0 g+ E$ A$ Q: V  CSS Code复制内容到剪贴板/ s0 t. D$ ~4 G! R, \# ^ 1 o0 ^: }5 f0 R' D: z0 C+ |
  body{background-color:#000;} / [; l @7 v- g; S* d' S, U' c1 n, m# N* n( j   .curvedBox{ 6 q! L, v' S* V0 l$ S1 l K( f % y6 _ }7 S' S/ h" M" P  width:300px; 0 U. V8 \3 i2 Z4 ]7 u y' [( K. w8 H2 i  margin: 2510px auto 0;% C/ ]/ z; D& e; i2 W2 W 5 G8 y: S7 j! p% r6 a& S5 F8 r# Z   } ! R8 G' ^8 s! ~# @ # g4 q0 c* q8 o, F) v  .curvedBox .r1,.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{/ L% i) A# \ c0 C7 e( [# J8 v3 ? 3 u# t' g/ G8 i  background-color:#fff; $ v9 K7 I* e E7 G) j) u4 R: R5 W! |% K- Y, [( b5 ~   display:block; " @& I5 D- J* W8 C1 x: O* K+ p# @2 g" b0 a7 c- ]/ \- z   overflow:hidden; 6 v& K1 t1 ~" p - _8 @4 M6 L2 H; p  height:1px;8 v: J5 x$ {* ^5 V4 C : @0 s8 C5 `/ S9 h   font-size:1px;6 j S0 n5 B& m9 q( n& U ) d( Y6 v8 Y9 g" e1 @  } ) i% N2 ?' y2 [3 G( D7 P* v' f . T- b# L1 W8 [5 [5 B0 s. @1 @  .curvedBox .r2,.curvedBox .r3,.curvedBox .r4{ : B4 N/ L, @% ?' P ( h/ M4 a% y7 C% i, e/ h/ h+ W  border-width:0 1px;1 [/ p, t- c+ \; N8 {' \5 q6 S . r: k" X6 v4 ?3 `   border-left:1px solid #fff;, C- D- ?& N( r/ ] n. f ! u- }0 h( D2 K; n! K  border-right:1px solid #fff; 0 v* ~0 f4 @3 S8 ]& h. s* W/ i/ Q, c/ n( @. H# A. r   } % ^! ]$ z/ a& q3 |! S5 i( g" `3 i, w- L5 v: V3 [: W   .curvedBox .r1{margin:0 6px;} + |6 K. L4 [& i( {( m8 O6 ~: k5 m% c1 ^& I6 v; F   .curvedBox .r2{margin:0 3px;} . D8 C1 G. z$ u# o# ^' ?, L . P5 m5 c8 G2 j( z6 N# a  .curvedBox .r3{margin:0 2px;} & i* H. X6 L$ P- x2 R ! f. L5 ]& x* ~- {, j  .curvedBox .r4{' `0 P Q/ P* b C; N a8 a( x' B7 G " V! P" L7 r) ?9 A: p/ \   margin:0 1px; . ]# V2 h& _1 G- W6 e. Q% O! x" v : C- h h- }' m; j9 C# {0 W. h' f  height:2px; ' ~- g4 M! D3 \% \! D8 G 5 m. S! j" ^- v' |  }' W# z: H1 @, e1 r, m- H J * |0 N+ [ A' A) ]/ p* h  .curvedBox .content{ 6 \8 q( N5 q: o! ~" w0 [ 9 x% f" q- h+ D& ]) e$ D  background:#fff; " Z4 h7 I Z/ B# _/ N ! t' h; }# r. m6 p1 q& }  border-left:1px solid #fff; ! M6 @6 y8 B# [0 }& V: ~1 Y; F& b8 X; M6 t2 a: x0 c. T" _   border-right:1px solid #fff;) W1 u2 Y/ x" }5 T! I/ q( k c* P0 V {) A) a0 _9 s  padding:0 5px; % s0 n# {! R' b- K8 o 3 p U0 `# j6 ?' j  }
0 i- i5 N% L' G" ?9 F% g) B$ v$ L. ^" ]& j5 W   这个方法其实并不完美,其实只是利用了”无限接近”的一个概念。看放大后的图的话,可以很清楚地看到锯齿状。0 B: |2 ^: `( ^* ` # m( E- i) t3 p4 [ 3 |4 M( A U( F* ^7 y  其实把图片放大足够地倍数地话,也能看到锯齿,不过放大地倍数得相当大了。将 r1 r2 r3 r4 层叠起来,利用它们 margin(left/right) 的改变以及 border(left/right),来实现这个近似的效果。理论上,如果 rn 足够多的话,效果就会无限趋近圆弧。不过话又说回来了,多加这么多的标签和css的话,在效率上必然会存在问题,也说不上就比用图片好到哪里去。所以说,这只是提供一个思路,到底怎么用,用在哪里,还得因地制宜。 # Q- b- d# V! l8 n # u2 y2 |1 x+ P; |: e  不过有第一点其实应该注意的 rn{;overflow:hidden;} 这是解决 ie 下1像素高容器的方法,ie 下当容器高度低于某些值时(如10px),即使指定" b0 I; x# ]- y) ]8 D( Q! l " x0 q) f( _/ w }! Z$ Y7 _   height:1px; 得到的表现都会远高于1px,而 overflow:hidden; 是一个很好的解决方法。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

qiuqiufa.com

网站简介

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