作者： 來源：booto.net 發(fā)布時間：2009-07-23 08:14 點擊：
大家也知道，CSS3將可能在明年就正式的加入到了我們的設(shè)計中，而這篇教程也是來自國外，
原文鏈接。這里只是稍微的翻譯下，希望大家能夠從中領(lǐng)悟。
圓角效果，首先我們應(yīng)該來創(chuàng)建一個DIV和簡單的CSS吧。
<body> <div id="box"></div> </body>
在CSS中，我們應(yīng)該給他定義一個寬度和高度，當(dāng)然還有背景。
#box { width:590px; height:100px; background-color:#6B86A6; ｝
好了，準(zhǔn)備工作都已經(jīng)就緒了，那么我們就開始做圓角吧，其實很簡單。
1.對4個角都設(shè)置。
#box { -moz-border-radius: 20px; }
2.這種情況比較特殊，是對左上角和右下角設(shè)置同一種圓角，而右上角和左下角是同一種圓角。
#box { -moz-border-radius:20px 40px; }
3.這種情況也比較特殊，是左上角為20px的圓角，右上和左下是40px的圓角，而右下則是5px的圓角。
#box { -moz-border-radius:20px 40px 5px; }
4.這種情況則比較規(guī)則，則是右上、右上、右下、左下依次是10px/20px/30px/40px的圓角。
#box { -moz-border-radius:10px 20px 30px 40px; }
5.分別控制4個位置的圓角。
-moz-border-radius-topleft for the top-left corner;
-moz-border-radius-topright for the top-right corner;
-moz-border-radius-bottomright for the bottom-right corner;
-moz-border-radius-bottomleft for the bottom-left corner;
#box { -moz-border-radius-topright: 30px; }
#box { -moz-border-radius-topleft: 30px; }
#box { -moz-border-radius-topleft: 30px 15px; } 這種情況很特別，也就是會自動計算。一般不是會用到。
6.分別控制上邊的2個位置和下面的2個位置。
#box { -moz-border-radius: 30px / 15px; }
#box { -moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }
7.Safari和Chrome的hack。
#box { -webkit-border-radius: 10px 20px 30px 40px; } 大家應(yīng)該看的懂吧。有規(guī)律的那種
#box { -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 30px; -webkit-border-bottom-left-radius: 40px; } 控制各個位置
#box { -webkit-border-top-left-radius: 30px 15px; }
#box { -webkit-border-radius: 30px 15px; } 這種需要注意，沒有了“/”
好了，其實也真的很簡單，比原來用圖片來代替的過程不知道容易了多少。簡單翻譯結(jié)束。
