How to use CSS's box-shadow or -moz-box-shadow to create a shadow for a div with 0 height?

If the height of a div is 10px, then the shadow is ok:

http://jsfiddle.net/m3KYB/6/

but if the height is changed to 1px or 0, then the shadow doesn't have a good blur and is uniform in color, and is lig开发者_如何学Pythonhter too (on both Firefox and Chrome)

It can be hacked by using a height of 10px, together with margin-top: -10px, but sometimes there can be "extra shadow" around the left and right side of the "fake" 10px box... and what is a more standard way to do it without using a hack?

I played around a bit your coding sample and you're right it does get progressively lighter. In chrome, the shadow strangely gets lighter each step you take down from the height:5px;. Same in FF. I did a couple of screen grabs and looked at the color closest to the bottom of the div in the shadow with photoshop. Here are the results:

height:5px; - #b5b5b5  
height:4px; - #c0c0c0  
height:3px; - #cccccc  
height:2px; - #d8d8d8  
height:1px; - #e3e3e3  
height:0px; - #eeeeee 

The effect must be starting even earlier than 5px because that first color @ 5px is significantly lighter than what's in your CSS. The easiest effect is just to step your color down something maybe 10% darker for each pixel you go down. That should visually correct this.

What do I think is going on? When you make the div under 5px, the point at which the browser starts the #888 part of the shadow gradient is too small for it to be shown accurately. Maybe it starts the shadow in the middle of the 5px height div (behind the viewport) and 7-8px total is not enough room to step down from a gray as dark as #888. You'd see banding big time I bet. So the browser is overriding that potential pitfall by muting the color to some extent.

It's weird but it's happening in both FF and Chrome, so I bet its part of the W3C spec on how shadows should degrade. Im not sure this is the right answer, but its the best answer I could come up with. This was in FF 3.6.12 and Chrome 7.0.517.44 on OSX 10.6.4.