在CSS3中有一項新語法可以簡單實現區塊邊角可以圓角化的效果,不過現行的Internet Explorer尚不支援此語法喔。
所以大家快點拋棄Internet Explorer走向其他瀏覽器的環抱吧!! XD 不然可是看不到美美的網頁喔!!!
在各瀏覽器中的圓角語法不是一樣的寫法,所以每個圓角語法在CSS檔上要寫上三種來對應各個瀏覽器 XD|||
CSS3 (Opera) | Mozilla (FireFox) | WebKit (Safari、Google Chrome) | |
四邊圓角 | border-radius | -moz-border-radius | -webkit-border-radius |
左上圓角 | border-top-left-radius | -moz-border-radius-topleft | -webkit-border-top-left-radius |
右上圓角 | border-top-right-radius | -moz-border-radius-topright | -webkit-border-top-right-radius |
左下圓角 | border-bottom-left-radius | -moz-border-radius-bottomleft | -webkit-border-bottom-left-radius |
右下圓角 | border-bottom-right-radius | -moz-border-radius-bottomright | -webkit-border-bottom-right-radius |
基本的寫法:( 四邊圓角值15px )
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
除了可以用上表個別指定單一邊圓角值外也支援縮寫語法border-radius: [左上] [右上] [右下] [左下];
左上5px、右上10px、右下15px、左下20px
border-radius:5px 10px 15px 20px;
-moz-border-radius:5px 10px 15px 20px;
-webkit-border-radius:5px 10px 15px 20px;
border-radius:5px 10px 15px 20px;
-moz-border-radius:5px 10px 15px 20px;
-webkit-border-radius:5px 10px 15px 20px;
透過這樣的CSS技術可以有效降低使用圖片量,增進讀取速度與節省網站空間。
雖然目前 Internet Explorer 8 尚未支援這個CSS語法,不過已經在下一個版本確定有支援此語法了,所以早點讓你的網站也活用此技術吧!
很有幫助呢
因為我也是用arras theme 可是有很多問題都很難找 有中文真的很棒 !
先謝謝你的熱心分享耶
有空歡迎常回來逛逛
不错,正要改一下 css的,谢谢了
這個很實用~