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

首先介紹一下語(yǔ)法：

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

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

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

說(shuō)明一下：

第一個(gè)值是水平半徑。

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

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

如果任意一個(gè)值為0，則這個(gè)角是矩形，不會(huì)是圓的。

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

CSS3適用的瀏覽器：

IE9.0、Firefox、Safari、Chrome、Opera

CSS3測(cè)試實(shí)例：

水平與垂直半徑相同時(shí)：

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


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


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


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

水平與垂直半徑不同時(shí)：

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


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


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


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

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

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

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

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

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