如果一个div的高度是10px,那么阴影就可以了:
但是如果将高度更改为 1px 或 0,则阴影没有很好的模糊效果并且颜色均匀,并且也更亮(在 Firefox 和 Chrome 上)
可以通过使用 10px 的高度以及 来破解它margin-top: -10px
,但有时在“假”10px 框的左右两侧可能会有“额外的阴影”……还有什么是更标准的方法呢?使用黑客?
如果一个div的高度是10px,那么阴影就可以了:
但是如果将高度更改为 1px 或 0,则阴影没有很好的模糊效果并且颜色均匀,并且也更亮(在 Firefox 和 Chrome 上)
可以通过使用 10px 的高度以及 来破解它margin-top: -10px
,但有时在“假”10px 框的左右两侧可能会有“额外的阴影”……还有什么是更标准的方法呢?使用黑客?
我玩了一点你的编码示例,你是对的,它确实变得越来越轻。在 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 规范中关于阴影应该如何退化的一部分。我不确定这是正确的答案,但这是我能想到的最佳答案。这是在 OSX 10.6.4 上的 FF 3.6.12 和 Chrome 7.0.517.44 中。