Geek Answers Handbook

CSS3 Gradients and Boundary Radius resulting in an extraneous background in webkit

After my first question regarding CSS3 gradients, in which I recreated the "inner glow", I came to the point that I was not very comfortable with how webkit creates an effect.

Essentially, if you assign a background color to an element and apply a border radius to it, webkit will allow the background to “leak out”, filling the surrounding rectangle (making it a little horrible)

To reproduce an 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 is a problem only for Windows, so for those on a Mac, here is a screenshot: (check the "continue reading" button) (source: friendlygp.com )Ugly button

, Safari/Chrome ( , ) . Firefox , . Internet Explorer, .

- , "" ? CSS, , -, border-radius .

, . , CSS3, , , , "" .

, - , !

+5
2

, , - , :

-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

+21

, , . , , , , .

+3

More articles:


All Articles