CSS3圓角效果例項
阿新 • • 發佈：2022-04-10
使用css3實現圓角效果主要是用到了 border-radius 這個屬性，這個是css 3.0中新增的一個屬性。這裡將 border-radius 的相容性列舉如下：
| 瀏覽器 | 支援性 |
|---|---|
| Firefox(2、3+) | √ |
| Google Chrome(1.0.154+…) | √ |
| Google Chrome(2.0.156+…) | √ |
| Safari(3.2.1+ windows) | √ |
| Internet Explorer(IE7, IE8) | × |
| Opera 9.6 | × |
border-radius 屬性的值即圓半徑的值。
因為瀏覽器引擎的原因，針對 firefox Safari和Chrome 這兩種瀏覽器則有其特殊的寫法，即 -moz-border-radius 和 -webkit-border-radius
-moz-border-radius 用於 Firefox
-webkit-border-radius 用於 Safari和Chrome
注意這三種形式的書寫需要遵循一定的順序的，順序如下：
#radius {
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
}
border-radius 也可以像 border 屬性那樣分開寫，即：
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
那麼針對firefox Safari和Chrome 則加上相應的字首（-moz- -webkit-）就是了。
下面演示一個簡單的通過 css3 實現的圓角效果，首先貼下效果圖：
下面是示例程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
有牛人用這個實現了一個奧運五環的標誌，喜歡的可以看看（注意請在支援 border-radius 屬性的瀏覽器上面看效果）：
css3圓角實現奧運五環標誌（效果圖如下）