今天突然对圆角框来了兴趣,我以前都是用一张圆角的背景图片,然后再用css的background定位来实现圆角效果的。今天百度了一下,又发现了一篇叫做“不用css样式表和背景图片实现圆角矩形”的文章,仔细研读了下,功能很强大,只一个js文件就实现了圆角框效果,喜欢ing,所以记录下来,以免忘了,ps:我脑袋很好,基本上不忘事
。
从最简单的开始,先看个例子,
http://blog.ieyes.info/html/div-css/NiftyCube/demo1.html
查看源码
XML/HTML代码
- <style type="text/css">
- body{padding: 30px 0 0;background:#FFF;}
- div#box{
- width:200px;padding:
- 20px;margin:0 auto;
- background:#E6E6E6;}
- </style>
- <script type="text/javascript" src="niftycube.js"></script>
- <script type="text/javascript">
- window.onload=function(){
- Nifty("div#box","big");
- }
- </script>
如此简单!当页面圆角矩形很多的时候这种简洁就更显而易见了。
下面具体介绍Nifty Corners Cube的使用:



