CSS3 圓角屬性 border-radius和-webkit-border-radius使用
CSS3 圓角屬性 border-radius
在 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;
還可以每兩個圓角設置，即左上右下一個值，右上左下一個值：border-radius: 10px 5px;
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 屬性，最好每個圓角都采用相同的值，如果分別設置，可能在不同瀏覽器上渲染效果可能會有細微差別
<!--html5的標準-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3按鈕圓邊</title>
<style>.font-label{ font-weight: bold; } .input-text{ border: 1px solid #C3CED9; border-radius: 5px 5px 5px 5px;/**左上角-右上角-左下角-右下角*/ } .btn-login{ cursor: pointer; display: inline-block; position: relative; border-radius: 2px; font-weight: lighter; width:88px; padding-top: 0px 2px ; margin-bottom: 0px 2px; -moz-border-radius: 50px;/**兼容火狐瀏覽器*/ -webkit-border-radius: 50px;/**兼容蘋果；谷歌，等一些瀏覽器認*/ -o-border-radius: 50px;/**兼容opera瀏覽器*/ background-color:#03F; margin:0 0 0 10px; /***背景色漸變**/ background:-webkit-linear-gradient(top,#03F,#9dccdc); background: -moz-linear-gradient(top,#03F,#9dccdc); background:-o-linear-gradient(top,#03F,#9dccdc); background:linear-gradient(top,#03F,#9dccdc); } </style> </head> <body> <div align="center"> <span class="font-label">用戶名:</span> <input type="text" placeholder="請輸入用戶名" class="input-text"/> <br/> <span class="font-label">密 碼:</span> <input type="text" placeholder="請輸入密碼" class="input-text"/> <br/> <input type="reset" class="btn-login" value="重置" /> <input type="button" class="btn-login" value="登錄" /> </div> </body> </html> </pre><br />