IE,firefox , chrome设置圆角 css

来源:互联网 发布:炒股软件公式编写 编辑:程序博客网 时间:2024/04/29 23:56

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;
0 0