不用css样式表和背景图片实现圆角矩形，超简洁！

当网站页面的整体布局设计好后，接下来有很多细节的实现是很让人头疼的。其中之一就是圆角矩形的实现。

在网上看了很多圆角矩形的实现方法，基本有两种，一种是用纯css实现，不需要背景图片；另一种是用背景图像实现。但是，不管是哪一种，都有一个共同的缺点:需要使用很多代码来嵌套，而这些代码对搜索引擎来说毫无意义。

在《css cookbook》一书中介绍了一种实现圆角矩形十分简洁的方法，那就是用Nifty Corners Cube。

先看一个简单的例子：http://www.sz137.com/sz137/demo1.html

查看源码发现实现圆角矩形的代码：

1. <script type="text/javascript" src="niftycube.js"></script>
   
2. <script type="text/javascript">
   
3. window.onload=function(){
   
4.   Nifty("div#box","big");
   
5. }

复制代码

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

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

Nifty Corners Cube(以下简称Nifty)是基于GNU GPL licence的自由软件，整个程序代码不过10KB，包括一个JS文件和一个CSS文件。使用Nifty不需要背景图片，它会自动根据你的背景颜色匹配出圆角。使用Nifty会用到两组参数：第一组是CSS选择符(CSS Selector)，用来指定哪些单元(elements)需要改成圆角矩形；第二组是Nifty提供的内部参数，用来定义圆角样式，方位等。

第一组参数可以是：



这里需要注意的是，若你的导航栏使用div标签，CSS选择符是#head .navigation时，参数的写法应该是div.navigation。

第二组参数：



下面看一些例子：

1.同时作用于两个层：
示例：http://www.sz137.com/sz137/demo2.html
实现代码：

1. Nifty("div#content,div#nav");

复制代码

2.与背景图片完美结合：
示例：http://www.sz137.com/sz137/demo3.html
实现代码：

1. Nifty("div#box","transparent");

复制代码

3.圆角导航栏：
示例1：http://www.sz137.com/sz137/demo4_1.html
实现代码：

1. Nifty("ul#nav a","small transparent top");

复制代码

示例2:http://www.sz137.com/sz137/demo4_2.html
实现代码：

1. Nifty("ul#nav a","top");

复制代码

4.圆角按钮：
示例：http://www.sz137.com/sz137/demo5.html
实现代码：

1. Nifty("ul#nav a","small transparent top");

复制代码

5.右上角不要圆角，固定高度：
示例：http://www.sz137.com/sz137/demo6.html
实现代码：

1. Nifty("div#about li","tl bottom big fixed-height");

复制代码

6.same-height属性：
示例：http://www.sz137.com/sz137/demo7.html
实现代码：

1. Nifty("div#content,div#nav","same-height");

复制代码

其它示例：
http://www.sz137.com/sz137/demo8.html
http://www.sz137.com/sz137/demo9.html
http://www.sz137.com/sz137/demo10.html
http://www.sz137.com/sz137/demo11.html
http://www.sz137.com/sz137/demo12.html
http://www.sz137.com/sz137/demo13.html

下载地址：
http://www.sz137.com/sz137/NiftyCube.rar
欢迎转载！

[ 本帖最后由 人在苏州 于 2007-10-29 14:27 编辑 ]

好帖顶下

谢谢，的确是好东西，整理了半天，发上来共享

谢谢楼主

有没有结合论坛表格的列子??

原帖由 小猪。 于 2007-10-29 15:15 发表
需要JS来镶套..不怎么喜欢..!

用html要四对标签才能有四个圆角，如果圆角矩形个数很多的话你要用多少代码？

很不错啊.帮顶下

原帖由 yeemn 于 2007-10-29 15:03 发表
谢谢楼主

有没有结合论坛表格的列子??

表格也是一样用的。第一个属性直接用table，所有表格会变成圆角。也可以指定表格id或者class属性。