Menu
I would like to take advantage of the new CSS3 box-shadow feature for a site I am working on. The problem is that Chrome 9.0.5 and Opera 10 do not render the inset border correctly if there is an img inside (the borders are hiddden around the image area).
I understand box-shadow is still work in progress, but I would expect browsers to fully support it or fully ignore it.
<!doctype html>
<html>
<head>
<style>
div {
border: 1px solid black;
width: 300px;
height: 200px;
overflow: hidden;
// CSS3 inset shade
-moz-box-shadow: inset 0 0 20px red;
-webkit-box-shadow: inset 0 0 20px red;
box-shadow: inset 0 0 20px red;
}
</style>
</head>
<body>
<div>
<img src="http://www.google.com/images/logos/ps_logo2.png" width="364" height="126" alt="" />
</div>
</body>
</html>
Does one know some workaround to render the red shade correctly?
Thanks!
Edit: I am happy with the answer, but just wanted to add a live link to help other folks out there. Here it is
380
Box-shadow is just above the background on the stacking order when using inset. Therefore, any image you have inside the div will cover the shadow.
Per the W3C Specs
In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).
In other words, Chrome and Opera are doing it correctly (FTR, FF 3.6.13 does the same thing as Opera).
If you want the shadow to overlap the image, you have a few different options, depending on your needs:
background property of the div.
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
