CSS3渐变和边框半径导致webkit中的无关背景

Question

在我的1st question 与我正在重新创建“内部发光”的 CSS3 渐变相关之后，我现在已经到了对 webkit 呈现效果的方式不太满意的地步。

基本上，如果你给一个元素一个背景颜色并为其应用一个边框半径，webkit 会让背景颜色“渗出”以填充周围的盒子（让它看起来有点糟糕）

要重现不良效果，请尝试以下操作

section#featured footer p a
{
    color: rgb(255,255,255);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background: rgb(98,99,100);
    -moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}

显然这似乎是一个仅限于 Windows 的问题，因此对于那些使用 Mac 的用户，这是一个屏幕截图：（选中“继续阅读”按钮）
_{（来源：friendlygp.com）}

您会注意到，在 Safari/Chrome 中（据我所知，最新的可用公共下载以及最新的 nightlies），您会看到相当难看的背景颜色渗色。但是，在 Firefox 中，您应该能够看到我所追求的。如果您使用的是 Internet Explorer，那么您将有祸了。

有人知道可以让我产生“正确”效果的技术吗？是否有一个我错过的 CSS 属性告诉 webkit 仅在包含框的边框半径部分内具有背景。

我可能会使用图像，但我真的想避免它。当然，由于我们正在处理 CSS3 并且环境在不断变化，我可能只需要“合并”它并恢复为图像。

但是，如果有人可以提出替代方案，我将非常感激！

Answer 1

终于，在很长一段时间后，比我聪明得多的人找到了解决办法：

-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

是你的朋友:)

发件人：http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

Answer 2

不幸的是，这是known bug。你可以通过给你的元素一个足够大的背景色边框来解决这个问题，以覆盖泄漏的嵌入阴影，但这远非理想的解决方案。