在css3.0中，又新增了乙個新的屬性border-radius，使用border-radius這個屬性可以實現圓角邊框的效果。除ie和遨遊外，目前有firefox ，safari，chrome，opera支援該屬性，其safari，chrome，opera是支援最好的，依照了w3c的標準，僅僅使用border-radius，就可以實現效果，無需加入字首-webkit。而火狐依然需要加上字首-moz。
即：firefox支援border-radius(圓角)：-moz-border-radius:10px;
webkit核心的safari和chrome支援border-radius(圓角)：-webkit-border-radius:10px;
opera支援border-radius(圓角)：border-radius:10px;
ie不支援border-radius(圓角)
效果圖：（ie和遨遊不支援！）
**：border radius
再此我們還可以隨意指定圓角的位置，上左，上右，下左，下右四個方向。
在firefox、webkit核心的safari，chrome和 opera的具體書寫格式如下：
上左效果：
-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius 上左
上右效果：
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius 上右
下左效果：
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius 下左
下右效果：
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius 下右
然後我們可以做些效果：
例如常見的 標題欄 僅僅需要在上面用到圓角效果，如圖：
** ：
border radius
**：border radius
萬變不離其宗，僅僅需要改下的border-radius的方向，就可以實現一些很有用的效果，**變的越來越簡單。
如何不用border radius 寫圓角邊框
html 上面的圓角邊框 下面的圓角邊框 css樣式 xtop,xbottom xb1,xb2,xb3,xb4 xb1,xb2,xb3 xb2,xb3,xb4 xb1 xb2 xb3 xb4 xboxcon 解說 首先，他的圓角實現並不是真的圓角，而是由4個b標籤堆積起來的，每個b標籤都是高度為1p...
border radius 圓角半徑
相關屬性 border top right radius border bottom right radius border bottom left radius border top left radius 由浮點數字和單位識別符號組成的長度值。不可為負值。border top left radi...
關於圓角border radius
一 border radius 可以同時設定1 4個值 a 1個值 控制4個圓角 b 2個值 第1個控制左上角和右下角 第2個值控制左下角和右上角 c 3個值 第1個控制 第2個值控制左下角和右上角 第三個值控制右下角 d 4個值 依次控制4個圓角 從左上角 到 左下角 單個圓角的設定 border...