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上的人来说，这是一个屏幕截图:(选中'继续阅读'按钮） Ugly Button http://iamfriendly.clients.friendlygp.com/files/2010/04/download.png

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

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

我可能会使用图片，但我真的想避免它。当然，当我们处理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。您可以通过为元素提供足够大的背景色边框来覆盖泄漏的嵌入阴影，从而对其进行分类，但它远非理想的解决方案。

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

2 个答案: