在 css3 中新增了乙個 border-radius 邊框半徑屬性，即大家常用的圓角效果。這使得製作圓角將不再麻煩，只需對所用物件加乙個 border-radius 屬性即可，不必使用定位或冗餘**完成了。不過它的使用瓶頸目前也是顯而易見的，因為效果顯示需支援 css3 的現代瀏覽器，而在一些老版本瀏覽器上則無法顯示，如ie8及以下瀏覽器就不行。
css3 圓角屬性 border-radius 使用方法：
同時設定四個圓角只需給出乙個值即可：border-radius: 10px;
也可以同時單獨設定每乙個圓角（順時針方向）：border-radius: 10px 5px 15px 20px;
如果只需設定乙個圓角，可以寫單獨css設定：
border-top-left-radius: 10px;
border-top-right-radius: 5px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 20px;
css3 圓角屬性 border-radius 使用注意：
css3 部分屬性在某些舊版本瀏覽器上的對應設定有時也不一樣，有自己的私有屬性，比如部分屬性在firefox上應用需要加上-moz-、safari以及google chrome需加上-webkit-、opera需加上-o-、internet explorer 9需加上-ms-。不過這些問題隨著 css3 發布推薦標準後，這些瀏覽器在新版本上都已經做了修改，以支援 css3 原生屬性。
為了照顧這些舊版本瀏覽器的瀏覽，我們可以一併加上這些私有屬性。注意，border-radius 需放在最後面，不然可能會失效。如下（border-radius 屬性opera和ie不用設定）：
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
此外還需注意的是，firefox舊版本上的 border-radius 單個圓角屬性名稱也不一樣，它們分別是：
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 20px;
最後還有一點要提示的是：設定 border-radius 屬性，最好每個圓角都採用相同的值，如果分別設定，可能在不同瀏覽器上渲染效果可能會有細微差別
border-radius: 5px 5px 5px 5px;/**左上角-右上角-左下角-右下角*/
-moz-border-radius: 50px;/**相容火狐瀏覽器*/
-webkit-border-radius: 50px;/**相容蘋果；谷歌，等一些瀏覽器認*/
-o-border-radius: 50px;/**相容opera瀏覽器*/
使用者名稱:
密 碼:
CSS教程 CSS3圓角屬性
ie 和 opera 就沒有私有的圓角屬性了，如果有的話，那製作圓角應該就簡單多了，把各自的私有屬性全部寫上，讓各個瀏覽器對號入座，就達到了相容的效果。隨著網路的發展，css 也在不斷的完lkzvt善，充分吸取多年來 web 發展的需求，提出了很多新穎的 css 特性，例如很受歡迎的圓角矩形lkzv...
CSS3圓角詳解
全屏閱讀 收藏 一 css3圓角的優點 減少維護的工作量。檔案的生成 更新 編寫網頁 這些工作都不再需要了。提高網頁效能。由於不必再發出多餘的http請求，網頁的載入速度將變快。二 border radius屬性 css3圓角只需設定乙個屬性 border radius 含義是 邊框半徑 你為這個屬...
CSS3圓角詳解
css3圓角詳解 日期 2010年12月 9日 css3是樣式表 style sheet 語言的最新版本，它的一大優點就是支援圓角。css3圓角詳解 譯者 阮一峰 原文 發表日期 2010年12月8日 一 css3圓角的優點 減少維護的工作量。檔案的生成 更新 編寫網頁 這些工作都不再需要了。提高網...