CSS3 Farbverläufe und border-radius führen zu externem Hintergrund in webkit

Question

Nach meiner 1st question in Bezug auf CSS3 Farbverläufe, in denen ich ein 'innerer Glanz' nachgebildet habe, bin ich nun an dem Punkt angelangt, wo ich nicht so glücklich bin wie Webkit den Effekt rendert.

Grundsätzlich, wenn Sie ein Element mit einer Hintergrundfarbe geben und einen Grenzradius für sie gelten, webkit können die Hintergrundfarbe „bluten“ aus den umliegenden Feld zu füllen (so dass es ein bisschen schrecklich aussehen)

zu reproduzieren die unerwünschte Wirkung, versuchen Sie so etwas wie die folgenden

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

Offenbar scheint dies nur unter Windows Problem zu sein, also für die auf einem Mac, hier ein Screenshot: (Überprüfen Sie die ‚tragen auf Lesen‘ -Taste) Ugly Button http://iamfriendly.clients.friendlygp.com/files/2010/04/download.png

Sie werden feststellen, dass Sie in Safari/Chrome (die neuesten verfügbaren öffentlichen Downloads sowie die neuesten Nightlies, soweit ich das beurteilen kann), Sie eine ziemlich hässliche Hintergrundfarbe bluten bekommen. In Firefox sollten Sie jedoch sehen können, wonach ich suche. Wenn Sie im Internet Explorer sind, wehe Sie.

Kennt jemand eine Technik, mit der ich den "richtigen" Effekt erzeugen kann? Gibt es eine CSS-Eigenschaft, die ich vermisst habe, die Webkit nur den Hintergrund innerhalb des Border-Radius-Teils des enthaltenden Felds hat.

Ich könnte möglicherweise ein Bild verwenden, aber ich versuche wirklich, es zu vermeiden. Da wir uns natürlich mit CSS3 beschäftigen und sich die Landschaft ständig verändert, muss ich sie vielleicht einfach "zusammenlegen" und zu einem Bild zurückkehren.

Wenn jedoch jemand eine Alternative vorschlagen kann, wäre ich sehr dankbar!

Answer 1

Schließlich, nach einer schrecklich langen Zeit, jemand viel klüger als ich hat eine Lösung für dieses Problem:

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

ist dein Freund :)

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

Answer 2

Dies ist leider eine known bug. Sie können es umgehen, indem Sie Ihrem Element eine Hintergrundfarbe geben, die groß genug ist, um den eindringenden Schatten abzudecken, aber es ist bei weitem keine ideale Lösung.