在 Safari 中修复边框半径？答案

【问题标题】：Fixing Border Radius in Safari?在 Safari 中修复边框半径？
【发布时间】：2012-03-26 22:14:48
【问题描述】：

我在这里有点问题。我似乎无法让左边界和右边界在 Safari 上正常工作。我在 3 个浏览器（Chrome、Firefox 和 Safari）上截取了边界半径的屏幕截图。只有 Safari 有问题。

谷歌浏览器

火狐

Safari

从那里，您几乎可以说出问题所在。我使用了border-bottom-left-radius: 120px; 和border-bottom-right-radius: 20px;。但是，两个顶部半径属性似乎工作正常。

我有点卡住了，因为我不确定如何解决这个问题。顺便说一句，我说的是 Safari 版本 5.1.2 (6534.52.7)。

【问题讨论】：

我相信120px 对你的元素来说太大了，不是吗...
@AlexanderPavlov：当值大于允许的宽度/高度时，它将被限制为宽度或高度，以允许为准。这可能不是这里的问题，因为 Safari 通常能够处理这种情况。
Daniel A. White，感谢您的提醒，我现在已经更新了我的帖子。亚历山大巴甫洛夫，我想给它一个宽拱。
@BoltClock 是的，我绝不是在暗示这是罪魁祸首。 Chromium 和 Safari 使用不同的绘画引擎（与 WebKit 通常称为“渲染引擎”相反）：Skia for Chromium，呃……开罗？对于 Safari，这可能是 Safari 对本案的解释的问题。

【解决方案1】：

对我来说看起来像是一个 Safari 错误。由使用大于您的元素height 的border-radius 引起。

容易修复；设置border-radius 以匹配元素的height。反正我看不出有什么理由让它变大。

如果出于某种原因您需要一个示例：http://jsfiddle.net/zejQX/

编辑

您可以提供多个值来实现不同的结果：

border-bottom-left-radius: 150px 50px;

这是一个带有“宽拱”的示例，如下所示：http://jsfiddle.net/BpJ7v/3/

【讨论】：

【解决方案2】：

尝试添加

-webkit-background-clip: padding-box;

到具有边框半径的元素。

【讨论】：