首页 > 开发 > CSS > 正文

使用css实现圆角图形绘制

2024-07-11 08:29:55
字体:
来源:转载
供稿:网友

查看 demo

html

XML/HTML Code复制内容到剪贴板
  1. <div class="curvedBox">          <span>  
  2.         <span class="r1"></span>           <span class="r2"></span>  
  3.         <span class="r3"></span>           <span class="r4"></span>  
  4.     </span>       <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.    
  5.     </div>       <span>  
  6.         <span class="r4"></span>           <span class="r3"></span>  
  7.         <span class="r2"></span>           <span class="r1"></span>  
  8.     </span>   </div>    

css

CSS Code复制内容到剪贴板
  1. body{background-color:#000;}      .curvedBox{   
  2.     width:300px;        margin: 2510px auto 0;   
  3. }     .curvedBox .r1,.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{   
  4.     background-color:#fff;        display:block;   
  5.     overflow:hidden;        height:1px;   
  6.     font-size:1px;    }    
  7. .curvedBox .r2,.curvedBox .r3,.curvedBox .r4{        border-width:0 1px;   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表