CSS3如何實現DIV圓角邊框

CSS3如何實現圓角邊框

在進行頁面佈局時，DIV邊框默認是矩形邊框，想讓邊框爲圓角時，可以用CSS3的border-radius這一屬性來實現。
例如：想讓div盒子邊框四個角都爲半徑爲10px的圓角時具體代碼如下：

效果圖：

下面對border-radius具體細節進行介紹：
語法：border-radius: 1-4 length|% / 1-4 length|%;
註釋：按此順序設置每個 radii 的四個值。如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。

定義和用法

border-radius 屬性是一個簡寫屬性，用於設置四個 border-*-radius 屬性。
提示：該屬性允許您爲元素添加圓角邊框！

border-radius的數值有三種表示方法：px、%、em，對於border-radius的值的設置，我們常用的有四種寫法：
（1）當border-radius只有一個屬性值時，表示盒子的四個角都是半徑爲該值的圓角。
例如：border-radius:5px;表示該盒子四個角都爲半徑爲5px的圓角。

當border-radius屬性值爲50%時：
當盒子寬高相同時，此時盒子爲圓形；
當盒子寬高不同時，此時盒子爲橢圓形。
（2）當border-radius屬性值爲兩個時，第一個值表示左上角和右下角半徑爲該值，第二個值表示右上角和左下角半徑爲該值。
例如：border-radius:10px 20px;
第一個值表示左上角和右下角半徑爲10px，第二個值表示右上角和左下角半徑爲20px的圓角。
（3）border-radius屬性值爲4個值時，這四個值按順序分別表示的角爲左上 右上 右下 左下。
例如：border-radius:10px 20px 30px 40px；這四個值按順序分別表示的角爲左上角爲半徑10px的圓角 右上角爲半徑20px的圓角 右下角爲半徑爲30px的圓角 左下角爲半徑40px的圓角。
（4）可以單獨對一個角設置爲圓角：
左下角：border-bottom-left-radius:10px;
右下角：border-bottom-right-radius:10px;
左上角：border-top-left-radius:10px;
右上角：border-top-right-radius:10px;

注意事項

在設置對象爲圓形的時候，如果使用了border、padding等情況時，對象的實際顯示寬高已經不再是設置的width和height的數值，如果border-radius設置的值仍爲原本的width和height的一半，可能達不到預期的真正的圓形的效果。
例如：
Div樣式如下時：

此時效果：

解決方案：

方法1：可以通過設置百分比50%的方式來解決這一情況

效果：

方法2：計算一下實際的高度再來設置border-radius的數值。上面這個例子，div實際的寬高應該是100 + 20 * 2 = 140px，所以border-radius應該設置爲70px

效果：

瀏覽器支持

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。