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

Question

如果一个div的高度是10px，那么阴影就ok了:

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

但如果将高度更改为 1px 或 0，则阴影模糊效果不佳且颜色均匀，并且颜色也较浅(在 Firefox 和 Chrome 上)

它可以通过使用 10px 的高度和 margin-top: -10px 来破解，但有时“假”的左右两侧会有“额外的阴影” 10px 框...在不使用 hack 的情况下，更标准的方法是什么？

Answer 1

我试了一下您的编码示例，您说得对，它确实变得越来越轻。在 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%。这应该在视觉上纠正这一点。

我认为发生了什么？当您将 div 设为 5px 以下时，浏览器开始阴影渐变的 #888 部分的点太小，无法准确显示。也许它在 5px 高度 div 的中间(视口(viewport)后面)开始阴影，总共 7-8px 的空间不足以从像 #888 一样暗的灰色中降下来。我敢打赌，你会看到很多时间。因此，浏览器通过在某种程度上使颜色静音来克服这个潜在的陷阱。

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