仅在一侧投影[重复]

【问题标题】：Drop shadow only on one edge [duplicate]仅在一侧投影[重复]
【发布时间】：2011-03-30 20:42:04
【问题描述】：

可能重复：
drop shadow only bottom css3

使用 CSS3，如何使阴影只出现在 DIV 的底部边缘？我希望它可以在 FF4、IE9、C10 中运行。

设置正 Y 偏移看起来不太正确 - 我仍然可以看到其他边缘的阴影残留微弱，并且底部边缘的阴影过于僵硬。

【问题讨论】：

stackoverflow.com/questions/5460129/…
@thirtydot：哇，这个问题已经被问死了。仅今年一年，我就至少看到了 6 个这样的问题。

标签： css

【解决方案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>

【讨论】：

这就是我最终要做的。它也可以在 IE 上优雅地降级。第二个 div 可以只是一个透明的硬边矩形，用于极简风格的投影。