目前各家瀏覽器分別開始支援 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 的語法喔
/* support Safari, Chrome */ -webkit-border-radius: 5px; /* support firefox */ -moz-border-radius: 5px; border-radius: 5px;也可以個別設定角度 右上圓角:
border-topright-radius: 5px; -moz-border-topright-radius: 5px; -webkit-border-topright-radius: 5px;左上圓角:
border-topleft-radius: 5px; -moz-border-topleft-radius: 5px; -webkit-border-topleft-radius: 5px;右下圓角:
border-bottomright-radius: 5px; -moz-border-bottomright-radius: 5px; -webkit-border-bottomright-radius: 5px;左下圓角:
border-bottomleft-radius: 5px; -moz-border-bottomleft-radius: 5px; -webkit-border-bottomleft-radius: 5px;非常簡單,大家以後不用再自己做圓角的圖,CSS3 一行搞定啦 Ref:
css圓角(border-radius)介紹 螞蟻的 CSS border-radius developer mozilla border-radius