border-radius是CSS3中誕生的新樣式，它可以使邊框的邊角變成弧形和圓角。以往制作按鈕、弧形邊框時需要使用背景切圖的方式實現(xiàn)；不但臃腫，而且還容易產(chǎn)生布局BUG，不適于自適應(yīng)框架的書寫。

首先介紹一下語法：

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

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

<percentage>：用百分比設(shè)置對象的圓角半徑長度；不允許負(fù)值。

說明一下：

第一個值是水平半徑。

如果第二個值省略，則它等于第一個值，這時這個角就是一個四分之一圓角。

如果第二個值為任意值，則會改變圓角的弧度，具體效果下面會舉例進(jìn)行演示

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

當(dāng)然，此值不允許是負(fù)值。

CSS3適用的瀏覽器：

IE9.0、Firefox、Safari、Chrome、Opera

CSS3測試實例：

水平與垂直半徑相同時：

• 提供1個參數(shù)
  border-radius:10px;


• 提供2個參數(shù)
  border-radius:10px 20px;


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


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

水平與垂直半徑不同時：

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


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


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


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

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

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

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

左下角圓角：border-radius-bottomleft : 10px

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