今天突然对圆角框来了兴趣，我以前都是用一张圆角的背景图片，然后再用css的background定位来实现圆角效果的。今天百度了一下，又发现了一篇叫做“不用css样式表和背景图片实现圆角矩形”的文章，仔细研读了下，功能很强大，只一个js文件就实现了圆角框效果，喜欢ing，所以记录下来，以免忘了，ps：我脑袋很好，基本上不忘事
。
从最简单的开始，先看个例子，
http://blog.ieyes.info/html/div-css/NiftyCube/demo1.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的使用：
Nifty Corners Cube(以下简称Nifty)是基于GNU GPL licence的自由软件，整个程序代码不过10KB，包括一个JS文件和一个CSS文件。使用Nifty不需要背景图片，它会自动根据你的背景颜色匹配出圆角。使用 Nifty会用到两组参数：第一组是CSS选择符(CSS Selector)，用来指定哪些单元(elements)需要改成圆角矩形；第二组是Nifty提供的内部参数，用来定义圆角样式，方位等。
第一组参数可以是：
第二组参数：
下面看一些例子：
1.同时作用于两个层：
示例：http://blog.ieyes.info/html/div-css/NiftyCube/demo2.html
实现代码
- Nifty("div#content,div#nav");
2.与背景图片完美结合：
示例：http://blog.ieyes.info/html/div-css/NiftyCube/demo3.html
实现代码：
- Nifty("div#box","transparent");
3.圆角导航栏：
示例1：http://blog.ieyes.info/html/div-css/NiftyCube/demo4-1.html
实现代码：
- Nifty("ul#nav a","small transparent top");
示例2:http://blog.ieyes.info/html/div-css/NiftyCube/demo4-2.html
实现代码：
- Nifty("ul#nav a","top");
4.圆角按钮：
示例：http://blog.ieyes.info/html/div-css/NiftyCube/demo5.html
实现代码：
- Nifty("ul#nav a","small transparent top");
5.右上角不要圆角，固定高度：
示例：http://blog.ieyes.info/html/div-css/NiftyCube/demo6.html
实现代码：
- Nifty("div#about li","tl bottom big fixed-height");
6.same-height属性：
示例：http://blog.ieyes.info/html/div-css/NiftyCube/demo7.html
实现代码：
- Nifty("div#content,div#nav","same-height");
其它示例：
http://blog.ieyes.info/html/div-css/NiftyCube/demo8.html
http://blog.ieyes.info/html/div-css/NiftyCube/demo9.html
http://blog.ieyes.info/html/div-css/NiftyCube/demo10.html
http://blog.ieyes.info/html/div-css/NiftyCube/demo11.html
http://blog.ieyes.info/html/div-css/NiftyCube/demo12.html
http://blog.ieyes.info/html/div-css/NiftyCube/demo13.html
