CSS3渐变和边界半径导致webkit的外部背景 [英] CSS3 Gradients and border-radius leading to extraneous background in webkit

问题描述

在我的第一次问题与CSS3渐变相关，其中我正在重新创建一个内部发光我现在已经到了那一点，我不那么高兴webkit呈现的效果的方式。

基本上，如果给一个元素一个背景颜色并应用一个边框半径，webkit让背景颜色出血出来填充周围的盒子（使它看起来有点可怕）

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

  section＃featured footer pa 
 {
 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中，您应该能够看到我的后续。如果你在互联网浏览器中，那么你就可以了。

有没有人知道一种技术可以让我产生正确的效果？是否有一个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 * / 
  

/ p>

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

After my 1st question with relation to CSS3 gradients in which I was recreating an 'inner glow' I've now got to the point where I'm not so happy with the way in which webkit renders the effect.

Basically, if you give an element a background colour and apply a border radius to it, webkit lets the background colour "bleed" out to fill the surrounding box (making it look a bit awful)

To reproduce the undesirable effect, try something like the following

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);
}

Apparently this appears to be a Windows-only problem, so for those on a Mac, here's a screenshot: (Check the 'carry on reading' button) Ugly Button http://iamfriendly.clients.friendlygp.com/files/2010/04/download.png

You'll notice that in Safari/Chrome (the latest available public downloads as well as the latest nightlies as far as I can tell), you get a rather ugly background colour bleed. However, in Firefox, you should be able to see what I'm after. If you're in Internet Explorer, woe betide you.

Does anyone know of a technique which will allow me to produce the 'correct' effect? Is there a CSS Property which I've missed that tells webkit to only have the background within the border-radius'd part of the containing box.

I could potentially use an image, but I'm really trying to avoid it. Naturally, as we're dealing with CSS3 and the landscape is continually changing, I might just have to 'lump' it and revert to an image.

However, if anyone can suggest an alternative I would be very much appreciative!

解决方案

Finally, after an awfully long time, someone much cleverer than I has a solution to this:

-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 */

is your friend :)

From: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

这篇关于CSS3渐变和边界半径导致webkit的外部背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！