Firefox的圆角属性：
如果你想设置四个角都是一样圆角的话，可以像这样子直接设置-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来实现的。
如果你想设置四个角都是一样圆角的话，依然可以像这样子直接设置-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;将不会有任何效果。
对于IE浏览器，由于对CSS3支持欠佳，可以考虑加入behavior属性。
不同浏览器下的综合一下可以这样写：
-moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url(ie-circle-css3.htc);
如果要圆角效果，外加圆角背景的话可以借助border设置：
border-width:10px; border-color:#000; border-style:solid;
中间引入的ie-circle-css3.htc 内容如下：
// = limit) . . . → Read More: CSS3圆角在IE,Firefox,Chrome,Safari的实现
English
最新评论