边框半径在 Chrome 中不起作用？任何解决方法？答案

【问题标题】：border-radius not working in Chrome? Any workaround?边框半径在 Chrome 中不起作用？任何解决方法？
【发布时间】：2012-12-15 06:15:20
【问题描述】：

我已将 border-radius（以及旧版浏览器的 -moz-border-radius）设置为 20px，并且它在 Safari 和 Firefox 中运行良好。然后，我打开 Chrome，它拒绝接受定义的border-radius。有什么建议可以在 Chrome 中解决这个问题？

在此处查看实际的 CSS 编码： http://jsfiddle.net/MAYea/

Safari 中的屏幕截图：

Chrome 中的屏幕截图：

【问题讨论】：

【解决方案1】：

不是border-radius 不起作用，而是overflow 没有隐藏溢出。

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

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

【讨论】：

Chrome 就像某种新型 IE。
非常正确。当我一直在做的几乎所有 CSS3 东西都在 IE10 中工作但在 Chrome 中不起作用时，这很可悲......
忘记 CSS3； CSS2.1 的许多部分在 IE8 正确的地方仍然存在错误（尽管公平地说，IE8 也以自己的方式搞砸了）......
是的，我有。另外：文字阴影。这些在 Chrome 中非常可怕，我不能像前 8 个版本那样使用它，因为它使我的显示文本（例如标题，而不是正文）不可读。我一直认为微软正在齐心协力——而且做得很好。也就是说，IE9/IE10 仍然有一些自己的新问题，例如they don't implement the not keyword in media queries correctly.
嘿，你见过IE10's advertising techniques吗？对我来说似乎非常有效和准确！在某些方面也很谦虚。就像他们承认自己有一段糟糕的历史一样。

【解决方案2】：

我也有类似的问题，帮忙补充一下

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

还有

transform: translateY(0);

这似乎是在启用某种不同的渲染（猜测 3d 上下文，就像我们有时会强制 GPU 渲染那样......）

这个工作的原因我无法解释，也许其他人可以？

我现在遇到这个特殊问题，在 OS X 10.10.5 上使用最新的 Chrome v44...是的，我知道这是“修复”并且这是一个老问题 =)...

编辑：在另一个 SO-Question 中找到相同的修复程序，请在此处查看：link

【讨论】：

【解决方案3】：

-webkit-border-radius: 我想你在找什么？

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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


 -webkit-border-radius: for the Chrome

如果您需要它，请尝试here 的这个 javascript 库

【讨论】：

【解决方案6】：

你可以使用，

border-radius: 100

而不是，

border-radius: 100px

它可以在 IE 中完成这项工作，但在 Chrome 中不行。

【讨论】：