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＆amp;戏
2. Chrome和Opera中的错误看起来不同
3. 有缺陷的部分仅与超出border-radius值的边框宽度相关（即，对于border-radius：10px和边框宽度10px，它很好）
4. 正确渲染的部分与border-radius的值一样宽。

我很肯定应该向Opera和Webkit团队报告。