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

问题描述

在我的

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)

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屋！