以前作CSS的圓角很麻煩，有人會用javascrip去做，或者是css的滑門效果，又或者是像我比較常用的方式是乾脆自己畫圓角的圖，不過到css3之後，要做圓角就變的方便很多，現在用了這個，我都懶得用以前的方法了，但是IE還是不支援，IE去死!
看了以上的表，可以知道因為css還沒統一的關係，所以各個瀏覽器支援的語法不一樣，所以記得要做css圓角的話一定三種都要下。
跟box model一樣，圓角也可以依左上、右上、右下、左下的順序來下。
例如要設左上5px、右上10px、右下15px、左下20px，可以這樣設。
如果沒有看到圓角，代表你用的是IE 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 |
看了以上的表，可以知道因為css還沒統一的關係，所以各個瀏覽器支援的語法不一樣，所以記得要做css圓角的話一定三種都要下。
跟box model一樣，圓角也可以依左上、右上、右下、左下的順序來下。
例如要設左上5px、右上10px、右下15px、左下20px，可以這樣設。
border-radius:5px 10px 15px 20px;
-moz-border-radius:5px 10px 15px 20px;
-webkit-border-radius:5px 10px 15px 20px;
-moz-border-radius:5px 10px 15px 20px;
-webkit-border-radius:5px 10px 15px 20px;
如果沒有看到圓角，代表你用的是IE XD
留言