使用css实现圆角图形绘制

查看 demo

html

1. <div class="curvedBox">     
2.     <span>  
3.         <span class="r1"></span>  
4.         <span class="r2"></span>  
5.         <span class="r3"></span>  
6.         <span class="r4"></span>  
7.     </span>  
8.     <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.     </div>  
10.     <span>  
11.         <span class="r4"></span>  
12.         <span class="r3"></span>  
13.         <span class="r2"></span>  
14.         <span class="r1"></span>  
15.     </span>  
16. </div>    

css

1. body{background-color:#000;}     
2. .curvedBox{   
3.     width:300px;   
4.     margin: 2510px auto 0;   
5. }    
6. .curvedBox .r1,.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{   
7.     background-color:#fff;   
8.     display:block;   
9.     overflow:hidden;   
10.     height:1px;   
11.     font-size:1px;   
12. }    
13. .curvedBox .r2,.curvedBox .r3,.curvedBox .r4{   
14.     border-width:0 1px;   
15.