Box-shadow and border-radius bug in Chrome

问题:

I've been experimenting with CSS3 and found something strange. Heres's the part of DIV style:

border:#446429 solid 1px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset; -moz-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset; -webkit-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset; 

Rendering in Opera and Firefox are same and perfect:

alt text http://i47.tinypic.com/j8egp5.png

But Chrome renders shadow outside the border:

alt text http://i45.tinypic.com/5doykw.png

Is it supposed to be so or I missed something important?

回答1:

It looks like a known bug:

http://code.google.com/p/chromium/issues/detail?id=29427

Check out the bug discussion, you may find a workaround. Definitely Star this bug if you want it to be fixed sooner!

回答2:

Putting in first an inset shadow that is the same colour as the background seems to work pretty well without putting extra markup on your page.

E.g. if you had a white background page :

-webkit-box-shadow:1px 1px 1px #fff inset,0px 0px 5px #333 inset; 

回答3:

I just found fix, but it needs additional markup. We need place element with round corners and inner shadow into another container with the same round corners and overflow hidden.

Hello!
 

Announced above fix with border crashes border radius and is incompartible with background image under element (because of border color).

Thanks.

回答4:

The only workaround I've seen is to put a border on the element with the shadow and make that border wider than the shadow diffusion. So for an inset shadow like this:

box-shadow:inset 0 0 7px #000; 

You would need to add a border like this:

border:solid 7px #fff; 

It's the third number in the box-shadow declaration that you need to match (or exceed) with the border width. if you don't want a big fat old border on the element, you'll obviously need to make the border the same colour as the background behind it. So this workaround doesn't help much if your element is above a patterned image or a gradient. But on solid colours it works decently.

回答5:

Good news! Looks like a fix is coming through. Here's the ticket in WebKit Bugzilla, marked as resolved/fixed: https://bugs.webkit.org/show_bug.cgi?id=41576

And here's the commit to trunk in WebKit's Trac! http://trac.webkit.org/changeset/74089

回答6:

Try this -webkit-box-shadow: inset 0px 0 7px rgba(255, 242, 94, 0.4); using rgba seems to fix it.

Good luck!

回答7:

Using negative values has solved the problem for me.

-webkit-border-radius:10px; -webkit-box-shadow: -1px -1px 2px #CCC; 

回答8:

This bug has been fixed in the latest canary build. :)

回答9:

Beth Fauld's solution almost works, there is only a slight mistake, it should look as follows:

-webkit-box-shadow:1px 1px 0px 1px #fff inset, 0px 0px 5px #333 inset; 

Where #fff is the background color (outside the box), and #333 is the shadow color.

The third value in -webkit-box-shadow defines the blur size, while the fourth defines the shadow (opaque) size, so it's the latter that should be set to 1px.

文章来源: Box-shadow and border-radius bug in Chrome