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

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

1
回复
1630
查看
[复制链接]

1

主题

0

帖子

26

积分

球球发

体验VIP

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

积分
26
发表于 19-4-7 13:59:41 | 显示全部楼层 |阅读模式         
XML/HTML Code复制内容到剪贴板4 b) O7 ]6 T3 {, C3 d! I8 Z4 Z
<div class="curvedBox">7 J/ m: W7 J) W0 R <span>7 K( _+ t# _) v& s7 N7 d- O$ s <span class="r1"></span> - Q" P3 R4 C) c* C- p8 K5 M6 o<span class="r2"></span> 1 i5 x8 Y F% Y/ P4 l3 C* g<span class="r3"></span> , J* }4 e4 f; v<span class="r4"></span> 1 J: ~# `0 r t/ p5 y% ~$ Q</span>; T/ t: ]& H5 k9 _: g <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. - _. O% W: x- m% ]; S* [/ o/ Z</div> ' a. i3 i, ~: L% c, ?<span> 9 t& ~/ M' i# J% I, G5 T$ T& U* y<span class="r4"></span> 7 W7 B8 z X4 h g6 L7 e8 u. G<span class="r3"></span> 0 T0 b* W6 ]! D' h<span class="r2"></span> z& p5 |3 c n% z2 i: M% e <span class="r1"></span>, v0 |1 p" j3 T( B: H( \4 }7 W </span>/ J( R3 E8 L$ b" \; Z </div>: ?0 I3 p, ~" l8 k+ X; |
" J1 P4 p- {/ q& k% W$ p0 H1 O8 B - L' G' c7 q( ?0 r* v  CSS Code复制内容到剪贴板 * q$ D& `" q- \4 ~$ _7 b h8 |1 a5 h# F) V* f( h3 [
  body{background-color:#000;} ! `5 s/ T& q/ G3 R . @+ F+ j1 a+ Z9 M3 i  .curvedBox{/ @" n6 ?) `$ C* o # O( a7 A2 b/ d8 w/ T6 E  width:300px; ( [0 r! Q, @) F0 s( C4 m- M! E7 e$ ^0 `8 L5 h& a& S   margin: 2510px auto 0;/ @ Y% G& u+ F* t 6 u/ P0 O3 N0 q' A8 D9 }   } 1 }6 j. D; I1 l x4 c# J* j 9 w+ T( Y' \/ }  .curvedBox .r1,.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{9 j' X0 R1 Q; p7 H ; c/ Z l$ i) E  background-color:#fff; : t9 [5 `/ L! {7 W/ K: N; q . G$ g: @4 n6 M' n; d- |% q  display:block; % O1 _5 K7 ~! d g/ C" I/ S2 M1 U* x/ a& B, I# K" b   overflow:hidden; 7 u0 }! q- p' }& s# d( O& k% b7 ~1 P" P7 a% C& R7 p   height:1px;3 k7 N+ w7 c6 v 8 U2 y( R8 F |( i  font-size:1px;1 \; B! u" ?- N ; H9 M, ~7 Q4 h2 e4 n) o N" x$ r  } # J7 z! g8 w) Y1 V0 M: L7 h7 l3 [" a) H$ j% @+ Y   .curvedBox .r2,.curvedBox .r3,.curvedBox .r4{/ v% c2 S% u s* D" }1 N 0 V8 n/ t, Y) p9 ?  border-width:0 1px;& f5 O/ G: ~6 e4 i1 w# p$ C 9 Q) z1 \7 q! Y0 a   border-left:1px solid #fff; 8 c& u, n+ j3 `+ I+ w% c , e) H3 y% ^: U  border-right:1px solid #fff; / z& D5 y) L% v( Y8 W8 R7 t3 M, G( @/ f5 i   } ! j% | l/ A1 Q4 E4 g& E( W8 e 9 W5 ~! c9 D# b" o) R' V4 H$ y; g  .curvedBox .r1{margin:0 6px;} V. f+ c/ ?$ F5 K, u; R/ |( R # w, ?" T$ n/ S. U. i1 ^  .curvedBox .r2{margin:0 3px;}% T8 q5 I/ r/ d. H6 w* ` , p6 k! j# a2 U# w& i; w' `   .curvedBox .r3{margin:0 2px;}$ T0 f/ f6 Z" t0 r ; r, T) h& y7 h   .curvedBox .r4{ 9 \0 Z2 i) \( N! E" f) o, J: A ) D& ~( ]/ I! |$ X. m  margin:0 1px;# E) }: r6 v' w( }# s5 T3 v ; r4 s |% x# o/ h/ p) Y  height:2px; 3 O6 ?* y# E2 O8 M: ?# t0 M8 J) k* @0 {8 k: _   } 6 l. n, D1 ^: }/ X7 k; z6 [ 2 r3 I+ W6 W; k5 c* ^& I  .curvedBox .content{ 0 D$ ]: ]( d) L- N" e1 p5 h8 F n q h8 E+ y9 d4 O/ L: d' t) g   background:#fff; 0 {$ A) z$ b- R# M) K' ^1 l & N9 ^2 C4 W5 l) q* o# R  border-left:1px solid #fff;7 H& r2 `8 c- N# M9 d ?6 L3 I. b4 \# m9 M7 e   border-right:1px solid #fff; ) ~: C" W$ w$ @5 q+ C2 a) l: |; \3 |; Q* P$ j8 L   padding:0 5px; 1 O0 A* I' C1 p1 d2 W" H1 N% o3 A! b   }
: L4 l" r" s1 O6 w6 p3 c* {/ V# b }# K9 n   这个方法其实并不完美,其实只是利用了”无限接近”的一个概念。看放大后的图的话,可以很清楚地看到锯齿状。 + X b/ y. G9 V& h0 ] 2 @7 R7 h$ U9 a: C kHKBt99z79R8qype.jpg 8 D7 q0 C6 ~, L; e6 y- |9 w   其实把图片放大足够地倍数地话,也能看到锯齿,不过放大地倍数得相当大了。将 r1 r2 r3 r4 层叠起来,利用它们 margin(left/right) 的改变以及 border(left/right),来实现这个近似的效果。理论上,如果 rn 足够多的话,效果就会无限趋近圆弧。不过话又说回来了,多加这么多的标签和css的话,在效率上必然会存在问题,也说不上就比用图片好到哪里去。所以说,这只是提供一个思路,到底怎么用,用在哪里,还得因地制宜。 1 k) |- J& W9 t F! A( K* c$ L0 R5 {/ f   不过有第一点其实应该注意的 rn{;overflow:hidden;} 这是解决 ie 下1像素高容器的方法,ie 下当容器高度低于某些值时(如10px),即使指定. s& Y6 T1 T5 K" v7 Y, T! Y ) w+ X4 M/ K+ t& U   height:1px; 得到的表现都会远高于1px,而 overflow:hidden; 是一个很好的解决方法。

0

主题

9

帖子

4

积分

1°伸手党

Rank: 2

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

使用道具 举报

网站简介

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