如何使用CSS的box shadow或-moz box shadow为0高的div创建阴影?

我在你的代码样本上做了一些改动,你说得对,它确实越来越轻了。在chrome中,每次你从 height:5px; . FF相同。我做了几次屏幕抓取,用photoshop在阴影中查看最接近div底部的颜色。结果如下:

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

这个效果必须在5px之前开始,因为第一个颜色@5px明显比CSS中的颜色浅。最简单的效果就是把你的颜色调低一点,每调低一个像素,颜色可能要深10%。这应该可以从视觉上纠正这个问题。

我想是怎么回事?在5px下进行div时,浏览器启动阴影渐变的888部分的点太小,无法准确显示。也许它在5倍高的div中间(在视窗后面)开始阴影,总共7-8像素的空间不足以从像888一样暗的灰色中退下来。我敢打赌,你一定会看到大乐队的。因此,浏览器在某种程度上通过禁用颜色来覆盖这个潜在的陷阱。

这很奇怪,但它同时出现在FF和Chrome中,所以我敢打赌W3C规范中的一部分是关于阴影应该如何降级的。我不确定这是正确的答案,但这是我能想到的最好的答案。这是在FF 3.6.12和Chrome 7.0.517.44的OSX 10.6.4。