CSS 3 圓角 border-radius 介紹

woff

目前各家瀏覽器分別開始支援 CSS3，現在 MS 瀏覽器系列只有 IE 9 開始支援 CSS3，所以大家還是趕快升級到 IE 9.0，或者是使用 Google Chrome，FireFox 4.0 吧，以前還沒有 CSS 3 的時候，圓角功能都是靠 jQuery Plugin: Corner，有了 CSS3 大家就不用這麼麻煩了，一行就可以搞定喔。
CSS Border Radius Generator
大家可以參考 CSS Border Radius Generator 這網站，只要輸入4個角所需要的圓角半徑，就會自動產生 CSS 3 的語法喔

1. /* support Safari, Chrome */
   
2. -webkit-border-radius: 5px;
   
3. /* support firefox */
   
4. -moz-border-radius: 5px;
   
5. border-radius: 5px;

複製代碼

也可以個別設定角度 右上圓角：

1. border-topright-radius: 5px;
   
2. -moz-border-topright-radius: 5px;
   
3. -webkit-border-topright-radius: 5px;

複製代碼

左上圓角：

1. border-topleft-radius: 5px;
   
2. -moz-border-topleft-radius: 5px;
   
3. -webkit-border-topleft-radius: 5px;

複製代碼

右下圓角：

1. border-bottomright-radius: 5px;
   
2. -moz-border-bottomright-radius: 5px;
   
3. -webkit-border-bottomright-radius: 5px;

複製代碼

左下圓角：

1. border-bottomleft-radius: 5px;
   
2. -moz-border-bottomleft-radius: 5px;
   
3. -webkit-border-bottomleft-radius: 5px;

複製代碼

非常簡單，大家以後不用再自己做圓角的圖，CSS3 一行搞定啦 Ref: css圓角(border-radius)