简单实现圆角的办法

文件下载地址：

　　http://files.cnblogs.com/ypeih/%E7%AE%80%E5%8D%95%E5%AE%9E%E7%8E%B0%E5%9C%86%E8%A7%92%E7%9A%84%E5%8A%9E%E6%B3%95.rar

文件来源：http://www.aa25.cn/css_example/240.shtml

 

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

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

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

先看一个简单的例子：

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

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

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

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

第一组参数能够是：

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

第二组参数：


下面看一些例子：

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

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

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

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

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

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

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

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

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

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

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

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

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

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