CSS3屬性之圓角效果——border-radius屬性
在css3之前，要實現圓角的效果可以通過圖片或者用margin屬性實現(可以參考這裏：http://www.hicss.net/css-practise-of-image-round-box/)。實現過程很繁瑣，但CSS3的到來簡化了實現圓角的方式。
CSS3實現圓角需要使用border-radius屬性，但因為瀏覽器兼容性的問題，在開發過程中要加私有前綴。
| 1 2 3 4 |
-webkit-border-radius
-moz-border-radius
-ms-border-radius
-o-border-radius
|
border-radius屬性其實可以分為四個其他的屬性：
| 1 2 3 4 5 |
border-radius-top-left /*左上角*/
border-radius-top-right /*右上角*/
border-radius-bottom-right /*右下角*/
border-radius-bottom-left /*左下角*/
//提示：按順時針方式
|
下面用幾個實例來展示border-radius的具體用法。
1、border-radius單個屬性值：
| 1 2 |
//HTML清單
<div class="roundedCorner">
|
| 1 2 3 4 5 6 |
.roundedCorner{
width:100px;
height:100px;
background-color:#f90;
border-radius:10px;//左上，右上，右下，坐下都是10px
}
|
效果：
2、border-radius是個屬性值方式：
| 1 2 3 4 5 6 7 |
<div class="roundedCorner2"></div><br/><br/><br/>//HTML清單.roundedCorner2{
width:100px;
height:100px;
background-color:#f99;
border-radius:20px 10px 5px 2px;
}
|
效果：
不過在開發的過程中(我的工作中),經常用到的是border-radius單屬性值，設置4個不同圓角的情況很少。
border-radius的優勢不僅僅在制作圓角的邊框，還是利用border-radius屬性來畫圓和半圓。
1、制作半圓的方法：
元素的高度是寬度的一半，左上角和右上角的半徑元素的高度一致（大於高度也是可以的，至少為height值）。
| 1 2 3 4 5 6 7 |
<div class="semi-circle"></div>
.semi-circle{
width:100px;
height:50px;//高度是寬度的一半
background-color:#000;
border-radius:50px 50px 0 0;//左上和右上至少為height值
}
|
效果:
知道了如何畫上半圓，就會舉一反三畫其他方向的圓了，這裏不再贅述。
2、畫實心圓的方法：
寬度和高度一致(正方形)，然後四個角設置為高度或者寬度的1/2.
| 1 2 3 4 5 6 7 |
<div class="circle"></div>
.circle{
width:100px;
height:100px;
background-color:#cb18f8;
border-radius:50px;
}
|
效果：
總結：
CSS3實現圓角的方式既優雅又方便，但是兼容性不夠好，如果需要考慮舊版本的瀏覽器的話，可以考慮優雅降級的方式。開始提到的兩種方式的優點是兼容性好，但不夠優雅。
使用哪種方式，看具體的項目需求吧。
CSS3屬性之圓角效果——border-radius屬性