仅在一条边上投影

Question

  

可能重复：
  drop shadow only bottom css3

使用CSS3，如何使投影仅出现在DIV的底部边缘？我希望它能在FF4，IE9，C10中运行。

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

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>