CSS无图片实现圆角框

2008, January 6, 7:38 PM by 枫回路转 on 建设网站相关

XML/HTML代码
  1. <style type="text/css">  
  2. div.RoundedCorner{background: #9BD1FA}   
  3. b.rtop, b.rbottom{display:block;background: #FFF} 
  4.  
  5. b.rtop b, b.rbottom b{
  6. display:block;
  7. height: 1px;
  8. overflow: hidden;
  9. background: #9BD1FA}

  11. b.r1{margin: 0 5px}   
  12. b.r2{margin: 0 3px}   
  13. b.r3{margin: 0 2px}   
  14. b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}   
  15. </style>  
XML/HTML代码
  1. <div class="RoundedCorner">  
  2.  <b class="rtop">
  3.   <b class="r1"></b>
  4.   <b class="r2"></b>
  5.   <b class="r3"></b>
  6.   <b class="r4"></b>
  7.  </b>  
  8. <br>无图片实现圆角框<br><br>  
  9.  <b class="rbottom">
  10.   <b class="r4"></b>
  11.   <b class="r3"></b>
  12.   <b class="r2"></b>
  13.   <b class="r1"></b>
  14.  </b>  
  15. </div>  

标签: css, 圆角框

订阅:

作者：枫回路转
本文永久url：http://blog.ieyes.info/show-7-1.html
本文无图版url：http://blog.ieyes.info/archives/?article-7.html
版权所有，转载请以链接形式注明作者及原始出处。

上一篇: 偶也制作sablog风格（二）

下一篇: JS+CSS实现圆角框效果

只显示10条记录相关文章

>> JS+CSS实现圆角框效果 (浏览: 711, 评论: 0)

Trackbacks

点击获得Trackback地址,Encode: UTF-8 点击获得Trackback地址,Encode: GB2312 or GBK 点击获得Trackback地址,Encode: BIG5

发表评论