使用CSS 3新技術完美實現圓角效果

作者：Eve Cole 更新時間：2009-07-14 16:31:46

今天學習使用CSS3 技術不需要圖片即可實現圓角，把側邊欄標題背景的圓角效果和搜尋框的圓角效果用CSS3 實現。記錄一下以便日後使用。 W3C 很早就制訂了實現了CSS 圓角的CSS3 屬性：border-radius，Firefox 和Safari 也透過私有屬性實現了該功能：

Firefox 和Safari 實現圓角< /div>

效果如下：
其中-moz-border-radius 是Firefox 實現圓角的私有屬性，而-webkit-border-radius 是webkit 核心瀏覽器（如Safari 和Chrome）實現圓角的私有屬性，如果你只要指定某一個角是圓角的話，它們都分別定義了四個屬性：
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

當然IE （包括IE8）還是不支持，所以該效果只能在Firefox, Safari, 以及Chrome 中查看。