border-radius是CSS3中誕生的(de)新(xin)樣式(shi)，它可以(yi)(yi)使邊框的(de)邊角(jiao)變成(cheng)弧形(xing)和圓角(jiao)。以(yi)(yi)往制作按(an)鈕、弧形(xing)邊框時需要使用(yong)背景切(qie)圖的(de)方式(shi)實現；不但(dan)臃腫，而且還(huan)容易產生布局BUG，不適于自適應框架(jia)的(de)書寫。

首先介紹一下語法：

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length>&nbsp;| <percentage> ]{1,4} ]?

<length>：用(yong)長度值設置對象的圓角(jiao)半徑長度；不允許負值。

&lt;percentage>：用(yong)百分比設置對象的圓角半(ban)徑長度(du)；不允許負值。

說明一下：

第一(yi)個值是(shi)水平(ping)半徑(jing)。

如果第二(er)個值省略，則它(ta)等于第一(yi)個值，這時這個角就(jiu)是一(yi)個四(si)分之(zhi)一(yi)圓角。

如果第(di)二個(ge)值為任(ren)意值，則會改變圓角的(de)弧(hu)度，具體(ti)效果下面會舉例進行演示

如果任(ren)意一個值為0，則這個角是矩形(xing)，不會是圓(yuan)的。

當然，此值(zhi)不允許是負值(zhi)。

CSS3適用(yong)的瀏(liu)覽器：

IE9.0、Firefox、Safari、Chrome、Opera

CSS3測試實例：

水平與垂直半徑相同時：

• 提供1個參數
  border-radius:10px;


• 提供2個參數
  border-radius:10px 20px;


• 提供3個參數
  border-radius:10px 20px 30px;


• 提供4個參數
  border-radius:10px 20px 30px 40px;

水平與垂直半徑不同時：

• 提供1個參數
  border-radius:10px/5px;


• 提供2個參數
  border-radius:10px 20px/5px 10px;


• 提供3個參數
  border-radius:10px 20px 30px/5px 10px 15px;


• 提供4個參數
  border-radius:10px 20px 30px 40px/5px 10px 15px 20px;

除了以(yi)上的(de)幾種表達方式以(yi)外(wai)，還可以(yi)指定某個角生(sheng)成弧形樣(yang)式。

左上角圓角：border-radius-topleft : 10px

右(you)上角圓角：border-radius-topright: 10px

左下(xia)角(jiao)(jiao)圓角(jiao)(jiao)：border-radius-bottomleft : 10px

右下角圓角：border-radius-bottomright : 10px