浏览模式: 标准 | 列表 |  无图浏览Tag:css

JS+CSS实现圆角框效果

今天突然对圆角框来了兴趣,我以前都是用一张圆角的背景图片,然后再用css的background定位来实现圆角效果的。今天百度了一下,又发现了一篇叫做“不用css样式表和背景图片实现圆角矩形”的文章,仔细研读了下,功能很强大,只一个js文件就实现了圆角框效果,喜欢ing,所以记录下来,以免忘了,ps:我脑袋很好,基本上不忘事

从最简单的开始,先看个例子,

http://blog.ieyes.info/html/div-css/NiftyCube/demo1.html

查看源码

XML/HTML代码
  1. <style type="text/css">  
  2. body{padding: 30px 0 0;background:#FFF;}  
  3. div#box{
  4. width:200px;padding:
  5. 20px;margin:0 auto;
  6. background:#E6E6E6;}  
  7. </style>  
  8. <script type="text/javascript" src="niftycube.js"></script>  
  9. <script type="text/javascript">  
  10. window.onload=function(){  
  11. Nifty("div#box","big");  
  12. }  
  13. </script>
  14.  

如此简单!当页面圆角矩形很多的时候这种简洁就更显而易见了。

下面具体介绍Nifty Corners Cube的使用:

标签: css, js, 圆角框

CSS无图片实现圆角框

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}

  10. b.r1{margin: 0 5px}   
  11. b.r2{margin: 0 3px}   
  12. b.r3{margin: 0 2px}   
  13. b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}   
  14. </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, 圆角框