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

Question

我在尝试为某些 div 添加圆 Angular 时遇到了这个问题，但似乎找不到解决方案。我将此 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 )关于应该如何精确地渲染带有 Angular 半径的框边界，如果你想看看的话。但最终，如何绘制边框和圆 Angular 取决于浏览器，如果不进行合作，跨平台行为的一致性将难以实现。