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

Question

如果一个div的高度为10px的，那么暗影是确定：

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

但如果高度更改为1像素或0，那么暗影没有一个很好的模糊和均匀的色彩，而且是更轻太（在两个Firefox和Chrome）

它可以通过使用10px的高度，加上margin-top: -10px被黑，但有时也有可能是“额外的影子”左身“假”10px框的右侧......以及更为标准的方式不使用黑客就可以做到这一点？

Answer 1

我玩了一下你的编码样本，你是对的，它会逐渐变轻。在铬中，你从height:5px;中取下的每一步都会变得更轻。同FF。我做了几个屏幕抓取，并用photoshop查看了最接近div底部的颜色。下面是结果：

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

，因为第一种颜色@ 5px的比什么在你的CSS显著更轻的效果，必须还要早5px的开始。最简单的效果就是逐步降低颜色，使每个像素下降10％。这应该在视觉上纠正这一点

我觉得怎么回事？当您将div设置为5px以下时，浏览器启动阴影渐变的＃888部分的点太小，无法准确显示。也许它开始在5px高度div（在视口后面）中间的阴影，并且总计7-8px没有足够的空间从＃888的灰暗下来。你会看到我打赌很大的时间。因此，浏览器通过在一定程度上使颜色静音来压倒潜在的隐患。

这很奇怪，但它发生在FF和Chrome中，所以我敢打赌它的阴影应该如何降级的W3C规范的一部分。林不知道这是正确的答案，但它是我能想出的最佳答案。在OSX 10.6.4上，这是FF 3.6.12和Chrome 7.0.517.44。