CSS3 Gradients和border-radius导致webkit中的无关背景

在关于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上的人来说,这是一个截图:(查看'继续阅读'按钮) Ugly Button http://iamfriendly.clients.friendlygp.com/files/2010/ 04/download.png

你会注意到在Safari/Chrome中(据我所知,最新的公共下载以及最新的夜莺),你会得到一个相当难看的背景色流血.但是,在Firefox中,您应该能够看到我所追求的内容.如果您使用的是Internet Explorer,那可能会让您失望.

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

我可以使用图像,但我真的想避免它.当然,当我们处理CSS3并且景观不断变化时,我可能只需要"混乱"它并恢复为图像.

但是,如果有人能提出替代方案,我将非常感激!

最后,经过一段很长的时间,比我更聪明的人有一个解决方案:

-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