Safari 6 中的 CSS 边框半径问题答案

【问题标题】：CSS border-radius issue in Safari 6Safari 6 中的 CSS 边框半径问题
【发布时间】：2012-10-14 06:54:16
【问题描述】：

我想创建一个左上角和右上角圆角的盒子。我的 CSS：

border-radius: 4px 4px 0 0;

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

我已经尝试了所有方法（-webkit-border-radius、border-top-left-radius、border-top-right-radius、border-style:none、border-width:0、border-color:transparent、等），但这似乎是唯一没有破坏的东西：

border-radius: 4px;

这是一个 webkit 错误吗？（Chrome 有角工件，但没有其他）
如果不是，我怎样才能在不遇到这些问题的情况下只舍入左上角和右上角？
我使用的是 2012 MacBook Air、OSX Mountain Lion (10.8)、Safari 6.0.1、Chrome 22.0.1229.94

【问题讨论】：

请注意，例如，您可以使用droplr.com 快速托管图像，jsfiddle.net 用于工作示例。
这可能有助于使用：background-clip: padding-box;

标签： css safari6

【解决方案1】：

这是一个可能的答案，但您可能要处理很多事情，所以@ndm 提出了一个很好的建议来分享一个例子。

为了帮助调试正在发生的事情，我喜欢增加边框半径并添加彩色背景。

溢出

您可能只是在框内的内容溢出并覆盖了角落。试试.box { overflow: hidden; }。这是一个JSFiddle，它验证了在 Safari 6.0.2 中工作的三个常见场景。

抗锯齿

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

【讨论】：