Inset shadows declarations not working on latest Chrome? - google-chrome

Question

Chrome version: 25.0.1364.172
The code:
<div style="
border: 2px solid black;
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0px 5px 8px -10px red, inset 0px -5px 8px -10px red;
">
</div>
Can anyone give it a try ?
With this code, I was expecting to have inset shadows on TOP and BOTTOM only.
No dice.
http://jsfiddle.net/ngZNv/
If it does not work on your side either, can you please suggest a perhaps alternative way of doing this ?
This declaration seems to (more or less) work:
-webkit-box-shadow: inset 0px 1px 0px red, inset 0px -1px 0px red;
But it's a clearly different interpretation.
To sum it all up:
This works for Mozilla (without the prefix):
box-shadow: inset 0px 5px 8px -10px red, inset 0px -5px 8px -10px red;
No luck on chrome.
Please advice

Answer 1

It seems that the -10px is stopping the shadow from being displayed, that value is changing the spread of the shadow, so, it being negative doesn't make much sense. Not sure what you're intending it to look like. But it's at least visible if you change them to 10px rather than -10px.
<div style="
border: 2px solid black;
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0px 5px 8px 10px red, inset 0px -5px 8px 10px red;
">
</div>
The usage is as follows:
box-shadow: [inset] <horizontal-offset> <vertical-offset> [blur] [spread] [color];
EDIT:
Does this have a similar effect to what you want?
-webkit-box-shadow: inset 0px 5px 10px -5px #F00, inset 0px -5px 10px -5px #F00;