簡單實現圓角的辦法

文件下載地址：

　　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");