Question

如果div的高度是10px，那么阴影就可以了：

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

但是如果高度变为1px或0，则阴影没有良好的模糊并且颜色均匀，并且也更亮（在Firefox和Chrome上）

它可以通过使用10px的高度以及margin-top: -10px进行攻击，但有时在“假”10px盒子的左侧和右侧可能会有“额外的阴影”......什么是不使用黑客攻击的更标准方法吗？

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（视口后面）的中间开始阴影，总共7-8px没有足够的空间从灰色下降到＃888。你会看到我打赌的大片时间。因此，浏览器通过在某种程度上将颜色静音来覆盖潜在的陷阱。

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