CSS3圓角
隨著CSS3 border-radius屬性，你可以給任何元素“圓角”。
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次是數字-webkit-或-moz-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3 border-radius屬性
有了CSS3，你可以給任何元素“圓角”，使用border-radius財產。
這裡有三個例子：
1.用於與指定的背景顏色的元素圓角：
圓角！
2.帶邊框的元素圓角：
圓角！
3.用於與背景圖像的元素圓角：
圓角！
下面是代碼：
例
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
} 試一試»  | 提示： border-radius屬性實際上是A速記屬性border-top-left-radius ， border-top-right-radius ， border-bottom-right-radius和border-bottom-left-radius屬性。 |
|---|
CSS3 border-radius -指定每個角
如果您為僅指定一個值border-radius的財產，這個半徑將被應用到所有的4個角。
但是，你可以，如果你想單獨指定每個角落。 下面是規則：
- 四個值：第一個值適用於左上角，第二個值適用於右上角，第三個值適用於右下和第四值適用於左下角
- 三個值：第一個值適用於左上角，第二個值適用於右上和左下角，和第三值適用於右下
- 兩個值：第一個值適用於左上角和右下角，第二個值適用於右上和左下角
- 一個值：四個角落都同樣圓潤
這裡有三個例子：
1.四值- border-radius: 15px 50px 30px 5px ：
2.三值- border-radius: 15px 50px 30px ：
3.兩個值- border-radius: 15px 50px ：
下面是代碼：
例
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} 試一試» 您還可以創建橢圓角。
例
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} 試一試» 自測練習用！
CSS3圓角屬性
| 屬性 | 描述 |
|---|---|
| border-radius | 簡寫屬性設置所有四個邊框 - * - * - 半徑屬性 |
| border-top-left-radius | 定義了左上角的邊界的形狀 |
| border-top-right-radius | 定義右上角的邊框的形狀 |
| border-bottom-right-radius | 定義右下角邊框的形狀 |
| border-bottom-left-radius | 定義左下角邊框的形狀 |