大家也知道，CSS3將可能在明年就正式的加入到了我們的設(shè)計(jì)中，而這篇教程也是來(lái)自國(guó)外，原文鏈接。這里只是稍微的翻譯下，希望大家能夠從中領(lǐng)悟。
圓角效果，首先我們應(yīng)該來(lái)創(chuàng)建一個(gè)DIV和簡(jiǎn)單的CSS吧。
- <body>
- <div id="box"></div>
- </body>
在CSS中，我們應(yīng)該給他定義一個(gè)寬度和高度，當(dāng)然還有背景。
- #box {
- width:590px;
- height:100px;
- background-color:#6B86A6;
- ｝
好了，準(zhǔn)備工作都已經(jīng)就緒了，那么我們就開(kāi)始做圓角吧，其實(shí)很簡(jiǎn)單。
1.對(duì)4個(gè)角都設(shè)置。
- #box { -moz-border-radius: 20px; }
2.這種情況比較特殊，是對(duì)左上角和右下角設(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個(gè)位置的圓角。
-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; } 這種情況很特別，也就是會(huì)自動(dòng)計(jì)算。一般不是會(huì)用到。
6.分別控制上邊的2個(gè)位置和下面的2個(gè)位置。
- #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; } 控制各個(gè)位置
- #box { -webkit-border-top-left-radius: 30px 15px; }
- #box { -webkit-border-radius: 30px 15px; } 這種需要注意，沒(méi)有了“/”
好了，其實(shí)也真的很簡(jiǎn)單，比原來(lái)用圖片來(lái)代替的過(guò)程不知道容易了多少。簡(jiǎn)單翻譯結(jié)束。
