通过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内包含一个具有白色背景的元素，并对其进行绝对定位以隐藏顶部阴影。

<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，第二个值是垂直插图。只需更新该值即可获得“阴影”效果：

框阴影：0 10px 10px＃303030;

另外，check this article还可以使用盒子阴影获得其他一些很酷的效果。