在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清單
.roundedCorner
2
{
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實現圓角的方式既優雅又方便，但是兼容性不夠好，如果需要考慮舊版本的瀏覽器的話，可以考慮優雅降級的方式。開始提到的兩種方式的優點是兼容性好，但不夠優雅。
據w3c上的官方解釋，是這樣子的：
border-radius: 1-4 length|% / 1-4 length|%;
1-4指的是radius的四個值，length和%指的是值的單位。
寫過border的人都知道border可以帶四個參數分別設置四個邊框（上左下右的順序），同樣的，border-radius也可以帶四個參數，並且以順時針的方向解析，上左，上右，下右，下左：
|
1
2
3
|
.box{
border-radius:
5px
10px
20px
50px
}
|
展示結果：
兩個參數的時候，是上左和下右，上右和下左，比如.div1{border-radius: 2em 1em}，就不截圖了，直接demo
三個參數的時候，是上左，上右和下左，下右，比如.div1{border-radius: 2em 1em 3em}，demo
那么以斜杠/分開后面的參數是怎么回事呢？是這樣子的，第一個參數表示圓角的水平半徑，第二個參數表示圓角的垂直半徑，所以你現在就可以畫一個左右不對稱的圓角啦：
|
1
|
.div
1
{border-radius:
2em
/
1em
}
|
看到這里你會不會以如果四個圓角都要分別制定特殊的形狀，是不是 2em/1em , 1em/0.5em, 3em/1em, 1em/1em像上面那個四個參數一樣的設定（我就是這么以為的），答案是錯！誤！的！因為官方的解釋就是前面放1-4后面放1-4啊！魚不是被吃掉的就是被笨s的~
|
1
2
3
|
.div
1
{
border-radius:
10px
20px
30px
40px
/
40px
30px
20px
10px
}
|
按順時針的順序，斜杠/左邊是四個圓角的水平半徑，右邊是四個圓角的垂直半徑，但是通常我們很少寫右邊的參數，那就是默認右邊等於左邊的值。當然你也可以省略一些值，比如這樣子寫.div1{border-radius: 2em 1em 4em / 0.5em 3em;}，解析順序你就可以按照上面的自己推算一下啦。