Chrome、Opera、Safari 的 CSS3 边框半径问题

Question

我在尝试向某些 div 添加圆角时遇到了这个问题，但似乎找不到解决方案。我将这个 css 用于分配给 div 的类：

-moz-box-shadow: 0px 5px 5px #cccccc;
-webkit-box-shadow: 0px 5px 5px #cccccc;
box-shadow: 0px 5px 5px #cccccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

以下是它在 Chrome、Safari 和 Opera 中的显示方式：

这是它在 Firefox 和 IE9 中的显示方式：

Chrome 和其他浏览器中的背景看起来好像以某种方式覆盖了顶部边框的背景颜色。与彩色顶部边框相关的唯一 css 是：

border-top:8px solid #333333;

有什么想法吗？

Answer 1

我怀疑这是浏览器如何选择呈现具有部分边框的框以及border-radius 的问题。如果没有完全不同的方法，我认为您无法自行修复（尝试为另一边设置白色边框？我不知道这是否可行）。

the spec（特别是§5.4 Color and Style Transitions）正在起草某种标准，如果您愿意，应该如何准确地渲染具有角半径的框边框看看它。但最终，如何绘制边框和圆角取决于浏览器，如果没有合作，跨平台的一致行为将难以实现。

Answer 2

在各种浏览器中检查这个小提琴：

http://jsfiddle.net/QVS9X/

当您删除 border-radius 时，一切都会恢复正常。您可能已经在border-radius 的 Webkit 和 Opera 实现中发现了一个错误。检查它是否尚未被报告，如果没有，您可能想要报告它:)。

[编辑]

我很确定这是一个错误。

1. 它只在 Chrome 和 Opera 中表现出来
2. 该错误在 Chrome 和 Opera 中看起来不同
3. buggy部分只与超过border-radius值的边框宽度有关（即border-radius:10px，边框宽度10px就可以了）
4. 正确渲染的部分与border-radius的值一样宽。

我很肯定它应该同时报告给 Opera 和 Webkit 团队。