CSS3圓角屬性在Firefox,Chrome,Safari的實現
2009年07月03日 星期五 下午 03:03
今天在aw那裏看到他的博客用了Firefox專有的圓角屬性，另外WordPress的後臺也使用了，於是我自己也就試一下來用了。目前IE還未 支持圓角屬性，IE8我還不清楚支不支持，或許我們以後只要使用border-radius這個CSS3屬性就能輕鬆地在現代瀏覽器實現這個困擾很多小盆 友的問題了，希望這一天的到來不會太遙遠。目前我們已經可以在Firefox,Chrome,Safari實現這個功能了，但他們也還是使用私有屬性來實 現，用法上略有區別。
先說一下Firefox的圓角屬性：
-moz-border-radius: {1,4} | inherit
如果你想設置四個角都是一樣圓角的話，可以像這樣子直接設置-moz-border-radius:5px;
也可以單獨設置元素的上左、上右、下右、下左四個角的值，分別用-moz-border-radius-topleft、-moz-border- radius-topright、-moz-border-radius-bottomright、-moz-border-radius- bottomleft來設置。
也可以用合併起來一起設置，如我目前的主題暫時設置的-moz-border-radius:5px 0 5px 0;
對chrome、Safari這兩個webkit內核的瀏覽器來說，是用-webkit-border-radius來實現的。
-webkit-border-radius：{1,2} | inherit;
如果你想設置四個角都是一樣圓角的話，依然可以像這樣子直接設置-moz-border-radius:3px;
如果是單獨設置四個角的話，需要採取這種方式
-webkit-border-top-left-radius:5px 10px;
-webkit-border-top-right-radius:5px 10px;
-webkit-border-bottom-right-radius:5px 10px;
-webkit-border-bottom-left-radius:5px 10px;
如果是要合併的話，只支持-webkit-border-radius:3px;或者是這樣子-webkit-border-radius:3px 4px;使用-webkit-border-radius:5px 0 5px 0;將不會有任何效果。
著名皮膚製作人utom總結了圓角屬性不同瀏覽器下的運用
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
