2011年6月29日 星期三

CSS圓角

以前作CSS的圓角很麻煩,有人會用javascrip去做,或者是css的滑門效果,又或者是像我比較常用的方式是乾脆自己畫圓角的圖,不過到css3之後,要做圓角就變的方便很多,現在用了這個,我都懶得用以前的方法了,但是IE還是不支援,IE去死!

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;

如果沒有看到圓角,代表你用的是IE XD
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...