Safari 6中CSS border-radius的问题

Question

我希望创建一个左上角和右上角都是圆角的盒子。我的CSS代码如下：

border-radius: 4px 4px 0 0;

在Safari 6中，border-radius会产生一些失真/伪影。角落是“粗糙的”，并且会出现神秘的垂直白线（盒子背景为蓝色）。

我已经尝试了所有方法（-webkit-border-radius，border-top-left-radius，border-top-right-radius，border-style:none，border-width:0，border-color:transparent等），但这似乎是唯一不会出现问题的方法。

border-radius: 4px;

1. 这是一个 Webkit 的 bug 吗？（Chrome 有角落的渲染问题，但没有其他问题）
2. 如果不是，我如何只将左上和右上角圆角化，而不遇到这些问题？
3. 我使用的是 2012 年的 MacBook Air，OSX Mountain Lion (10.8)，Safari 6.0.1，Chrome 22.0.1229.94。

- besseddrest

---

只是一点提示，你可以使用 http://droplr.com 来快速托管图片，以及使用 http://jsfiddle.net 来创建工作示例。 - ndm

可能会有帮助的是使用：background-clip: padding-box; - Edd Turtle

Answer 1

这里有一个可能的答案，但你可能需要处理很多事情，所以@ndm提出了一个非常好的建议，可以分享一个示例。

为了帮助调试问题，我喜欢增加边框半径并添加彩色背景。

溢出

你可能只是在盒子里放置了内容，导致内容溢出并覆盖角落。尝试.box { overflow: hidden; }。这里有一个JSFiddle，验证了Safari 6.0.2中的三种常见场景。

抗锯齿

如果“神秘的白线”非常微妙，那可能只是Safari的抗锯齿效果，试图使边框看起来更平滑。通过增加边框厚度并比较外观来检查这个理论。

- Anson