border-radius在Chrome中不起作用？任何解决方法？

Question

我已将border-radius（以及旧浏览器的-moz-border-radius设置为20px，并且我在Safari和Firefox中使用它非常漂亮。然后，我打开Chrome，它拒绝接受定义的border-radius。有关在Chrome中解决此问题的建议吗？

请参阅此处的CSS编码： http://jsfiddle.net/MAYea/

Safari中的屏幕截图：

Chrome中的屏幕截图：

Answer 1

border-radius不起作用，overflow无法隐藏溢出。

这实际上是Chrome中的一个新错误。我在我的Doomsday clock上遇到了类似的问题，尽管它在早期版本的Chrome中运行良好。

作为一种变通方法，您可以在包含的元素和容器上指定border-radius。

Answer 2

我有类似的问题，它有助于添加

z-index: 0; /* or some other value */

但也

transform: translateY(0);

好像这样可以启用某种不同的渲染（对3d上下文一无所知，就像我们有时会对FORCE GPU渲染做的那样......）

之所以能起作用，我无法解释，也许其他人可以吗？

我现在遇到这个特殊问题，在OS X 10.10.5上安装了最新的Chrome v44 ......是的，我知道这是＆＃34;已修复＆＃34;这是一个老问题=）......

编辑：在另一个SO-Question中找到相同的修复，请点击此处：link

Answer 3

我认为

-webkit-border-radius:是你想要的吗？

Answer 4

将border-radius: 20px; CSS规则添加到:before和:after

DEMO

Answer 5

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;


 -webkit-border-radius: for the Chrome

如果您需要，可以试试here

中的这个javascript库

Answer 6

您可以使用

border-radius: 100  

而不是

border-radius: 100px

它将在IE中完成此工作，但在Chrome中不会。