Question

有人知道在Safari中使用'bug'的解决方法吗？

当我使用border-radius在CSS3中创建圆形边框时，它在Safari，FF等上工作正常。

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

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

感谢您的帮助！

Answer 1

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

以下应该更正。

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

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

Answer 2

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

您的问题的解决方案是使用： -webkit-background-clip：padding-box;

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

边境半径在safari下失败（丑陋的剪裁）

2 个答案: