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 屬性。