網頁設計

關於網頁設計的技術或相關資訊分享

css3 border radius

CSS3圓角效果

以往在網頁設計的時候,要做圓角都要很辛苦的做圖片,我們一開始介紹了製作圓角的方便網站,後來我們又介紹了使用Javascript製作圓角的方法,今天來跟大家介紹CSS3的圓角效果,更快更方便,不過前提是瀏覽者使用夠新的瀏覽器:)
目前各瀏覽器最新版本都支援CSS3的圓角效果,下面列出各瀏覽器在小邊寫這篇文章時最新版本的載點:
Firefox 7.0
Google Chrome 14
IE 9

Opera 11
Safri 5
(上面的清單是按照字母排序的,雖然剛好和小編的使用頻率一樣XD),大家快去更新吧,為了更好的瀏覽效果!

DEMO範例

圓角示範

語法說明

只需要在CSS裡面加入下面這兩行就可以了

border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */

也可以做一些變化,填入不同的圓角半徑,分別是代表 左上 右上 右下 左下

border-radius:40px 30px 40px 10px;
-moz-border-radius:40px 30px 40px 10px; /* Firefox 3.6 and earlier */

各圓角不同示範 

參考連結:W3Cschools

Please enable the javascript to submit this form