大家也知道，CSS3將可能在明年就正式的加入到了我們的設計中，而這篇教程也是來自國外，原文鏈接。這里只是稍微的翻譯下，希望大家能夠從中領悟。
圓角效果，首先我們應該來創建一個DIV和簡單的CSS吧。
- <body>
- <div id="box"></div>
- </body>
在CSS中，我們應該給他定義一個寬度和高度，當然還有背景。
- #box {
- width:590px;
- height:100px;
- background-color:#6B86A6;
- ｝
好了，準備工作都已經就緒了，那么我們就開始做圓角吧，其實很簡單。
1.對4個角都設置。
- #box { -moz-border-radius: 20px; }
2.這種情況比較特殊，是對左上角和右下角設置同一種圓角，而右上角和左下角是同一種圓角。
- #box { -moz-border-radius:20px 40px; }
3.這種情況也比較特殊，是左上角為20px的圓角，右上和左下是40px的圓角，而右下則是5px的圓角。
- #box { -moz-border-radius:20px 40px 5px; }
4.這種情況則比較規則，則是右上、右上、右下、左下依次是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; } 大家應該看的懂吧。有規律的那種
- #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; } 這種需要注意，沒有了“/”
好了，其實也真的很簡單，比原來用圖片來代替的過程不知道容易了多少。簡單翻譯結束。
