边框半径在 safari 下失败（丑陋的剪裁）答案

【问题标题】：border-radius fails under safari (ugly clipping)边框半径在 safari 下失败（丑陋的剪裁）
【发布时间】：2011-09-25 03:58:17
【问题描述】：

有人知道在 Safari 中跟踪“错误”的解决方法吗？

当我使用border-radius 在 CSS3 中创建圆角边框时，它在 Safari、FF 等上运行良好。

但是当边框颜色是背景颜色时，您可以看到容器背景与边框重叠。

你可以在这里试试：http://de.roundedcorner.org/css3-rounded-corner-generator 只需将边框颜色和网站背景设置为#333333

感谢您的帮助！

【问题讨论】：

标签： html safari css

【解决方案1】：

这很可能是由于背景剪辑造成的。

以下应该更正。

-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;

有关背景剪辑的更多信息，请查看此处： https://developer.mozilla.org/en/CSS/background-clip

【讨论】：

作为进一步的说明，我想补充一点，使用此剪辑选项可能会导致在元素内部、边框和背景之间发生类似的问题。乐趣！ :)
我也遇到了圆角剪裁问题 - 我不确定它是否属于同一职权范围，但背景剪裁并没有解决它。它与颜色的“光环”有关：jsfiddle.net/jSRND 有什么想法吗？如果不是同一个问题，将启动一个新线程。
也找到了解决此问题的方法，感谢 Twitter 上的@neil_pie：jsfiddle.net/dwYCg/8
谢谢你救了我+1 :)

【解决方案2】：

background-clip 属性用于确定背景是否延伸到边框中。默认值为border-box，这意味着它会扩展到其中，但如果将其设置为padding-box，则不会。如果您使用内容框，则背景只会延伸到内容区域。（来源：http://www.css3.info/preview/background-origin-and-background-clip/）

您的问题的解决方案是使用： -webkit-background-clip：填充框；

请务必注意，如果您使用简写符号来指定其他背景属性，则应在这些属性之后添加。似乎速记符号暗示了一个默认剪辑值，它将覆盖先前设置的剪辑值。（来源：http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed）

【讨论】：