仅在一个边缘添加投影效果

Question

可能是重复问题:
仅在css3底部显示阴影

使用CSS3，如何使下拉阴影仅出现在DIV的底部边缘？我希望它能在FF4、IE9、C10中工作。

设置一个正的Y偏移量看起来不太对劲 - 我仍然可以看到其他边缘的淡淡残留阴影，底部边缘的阴影也太僵硬了。

- JoJo

---

https://dev59.com/s2035IYBdhLWcg3wYO11 - thirtydot

@thirtydot：哇，这个问题已经被问了无数遍。仅今年我就看到过至少6个这样的问题。 - BoltClock

Answer 1

您可以参考@thirtydot发布的链接。我会使用两个div。这样可以使它与您发布的图片完全一致。

#container{
    width: 200px;
    height: 210px;
    overflow: hidden;
}


#element{
    width: 200px;
    height: 200px;
    background-color:aqua;
    box-shadow: 0px 5px 5px #888;
    float: left;
}
<div id="container">
<div id="element"></div>
</div>

- pixelJockey

---

这就是我最终实现的内容。它也可以在IE上优雅地降级。第二个div可以只是一个透明的硬边矩形，用于极简主义风格的阴影效果。 - JoJo