firefox中:设置圆形○:border-radius:12px 12px 12px 12px;
设置圆角:border-radius:5px;
网上所说的用 -moz-border-radius: 5px;,但这对16.0.2版本的firefox并不生效。
谷歌浏览器:-webkit-border-radius:3px;
如果你想设置四个角都是一样圆角的话,依然可以像这样子直接设置-webkit-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下设置:
-khtml-border-radius: 5px;(IE9是支持的,不知道IE8及以下支持的情况)
总结:
兼容不同浏览器圆角设置:
-moz-border-radius: 5px;-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;