通过CSS在盒子阴影的顶部有一个清晰的边缘？

Question

我正在使用以下css技术在div元素周围设计一个盒子阴影......

-webkit-box-shadow:0 0 10px #303030;
-moz-box-shadow:0 0 10px #303030;
box-shadow:0 0 10px #303030;

但有没有办法告诉css停止div顶部的阴影效果？我只想在div元素的左侧，右侧和底部产生效果。

感谢您的任何建议

Answer 1

Demo

div{
    height: 300px;
    width: 300px;
    -webkit-box-shadow:0 5px 10px #303030;
    -moz-box-shadow:0 5px 10px #303030;
    box-shadow:0 5px 10px #303030;
}

Answer 2

要完全摆脱顶部阴影而不加长底部阴影，我的解决方案是在div中包含另一个带有白色背景的元素，并绝对定位它以隐藏顶部阴影。< / p>

<div>
    <span></span>    
</div>


div {
    margin-top:20px;
    height:300px;
    width:300px;
    -webkit-box-shadow:0 0 10px #303030;
    position:relative;
}
span {
    display:block;
    position:absolute;
    top:-10px;
    height:10px;
    width:100%;
    background:#fff;
}

http://jsfiddle.net/QE8Bh/1/

Answer 3

根据specifications，第二个值是垂直插图。只需更新该值即可获得“投影”效果：

box-shadow: 0 10px 10px #303030;

另外，check this article还可以通过box-shadow实现其他一些很酷的效果。