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(据我所知，最新的公开下载以及最新的夜间更新)中，您会看到相当难看的背景色渗色。但是，在 Firefox 中，您应该能够看到我所追求的。如果您使用的是 Internet Explorer，那就麻烦了。

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

我可能会使用图像，但我确实在努力避免使用它。自然地，当我们处理 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 */

是你的 friend :)

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