CSS的圓角問題

IE就不理他了~~

網頁製作上圓角運用得當在視覺上相當好看優雅~
當然如果四邊都用圖片也是可以做到
不過在效能上會差很多了

介紹一下CSS圓角的屬性

-moz-border-radius: 5px; <--FireFox
-webkit-border-radius: 5px; <--chrome、Safari
border-radius: 5px; <--CSS3屬性

基本上這三個就可以完美達成了

簡寫的話(左上、右上、右下、左下)：

-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;

-webkit-border-radius 不支援這樣的寫法，要分開寫

-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;

大家可以試試唷~

--------------------------不華麗的分隔線--------------------------

IE的圓角問題有解決辦法了～(開心)
http://css3pie.com/demos/tabs/
這邊提供了解決辦法~~

可以使用圓角、漸層背景甚至是陰影效果~
只要在網頁上多加載一個.htc文件，並在CSS中使用就OK了

behavior: url(PIE.htc);

不過還是有一些些小小的bug需要處理
例如在外層DIV內有圓角的設定
裡面的css必須多一個position:relative才會顯示出來
http://css3pie.com/documentation/known-issues/