IT兄弟連 HTML5教程 CSS3屬性特效 圓角

 

傳統的圓角生成方案，必須使用多張圖片做爲背景圖案。CSS3的出現，使得咱們不再必浪費時間去製做這些圖片了，只須要border-radius屬性，支持瀏覽器IE 九、Opera 10.五、Safari 五、Chrome 4和Firefox 4。

 

1  border-radius屬性

CSS3圓角只需設置一個屬性：border-radius（含義是"邊框半徑"）。爲這個屬性提供一個值，就能同時設置四個圓角的半徑。全部合法的CSS度量值均可以使用：em、px、百分比等等。好比,下面是一個div方框（寬高都是200px，背景爲墨綠色，邊框爲2px的灰色實線），代碼以下：

 

實現的效果如圖1所示：

圖1 box最初樣式

 

如今來爲它設置50%的圓角，爲css增長border-radius: 50%，CSS代碼以下：

 

這裏經過爲圓角屬性值設置爲50%，也就是，同時將每一個圓角的"水平半徑"和"垂直半徑"都設置爲50%，最後實現一個圓形。如圖2所示：

  

 圖2  爲box設定四角都爲50%的圓角

 

border-radius能夠同時設置1到4個值。（想一想咱們以前的margin與padding）若是設置1個值，表示4個圓角都使用這個值。若是設置兩個值，表示左上角和右下角使用第一個值，右上角和左下角使用第二個值。若是設置三個值，表示左上角使用第一個值，右上角和左下角使用第二個值，右下角使用第三個值。若是設置四個值，則依次對應左上角、右上角、右下角、左下角（順時針順序）。

如今咱們來爲box的border-radius屬性設置兩個值border-radius: 50px 25px，來看看它的實現效果，CSS代碼以下：

 

實現的圓角效果，將box的左上角和右下角的圓角半徑設爲50px，右上角和左下角圓角半徑設爲25px。如圖3所示：

 

圖3  爲box的border-radius設置兩個值    

 

再來爲box的border-radius屬性設置三個值border-radius: 50px 10px 25px，來看看它的實現效果，CSS代碼以下：

 

實現的圓角效果，將box的左上角的圓角半徑設爲50px，右上角和左下角的圓角半徑設爲10px，右下角圓角半徑設爲25px。如圖4所示：

圖4  爲box的border-radius設置三個值

 

最後咱們爲box的border-radius屬性設置四個值border-radius: 50px 10px 25px 0，來看看它的實現效果，CSS代碼以下：

 

實現的圓角效果，將box的左上角的圓角半徑設爲50px，右上角的圓角半徑設爲10px，左下角的圓角半徑設爲25px，右下角圓角半徑設爲0。如圖5所示：

圖5  爲box的border-radius設置四個值

 

2  單個圓角的設置

除了同時設置四個圓角之外，還能夠單獨對每一個角進行設置。對應四個角，CSS3提供四個單獨的屬性：

（1）border-top-left-radius

（2）border-top-right-radius

（3）border-bottom-right-radius

（4）border-bottom-left-radius

這四個屬性均可以同時設置1到2個值。若是設置1個值，表示水平半徑與垂直半徑相等。若是設置2個值，第一個值表示水平半徑，第二個值表示垂直半徑。

如今，咱們爲單獨爲box的左上角設定50px的圓角，來看看它的實現效果，CSS代碼以下：

 

實現的圓角效果，將box的左上角的圓角半徑設爲50px。如圖6所示：

圖6 爲box設置左上角的圓角

 

雖然各大瀏覽器都支持border-radius，可是在某些細節上，實現都不同。當四個角的顏色、寬度、風格（實線框、虛線框等）、單位都相同時，全部瀏覽器的渲染結果基本一致；一旦四個角的設置不相同，就會出現很大的差別。另外，並不是全部瀏覽器，都支持將圓角半徑設爲一個百分比值。

所以，目前最安全的作法，就是將每一個圓角邊框的風格和寬度，都設爲同樣的值，而且避免使用百分比值。