通过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

根据规范，第二个值为垂直插入。只需更新该值，以获得"投影"效果:

<>之前Box-shadow: 0 10px 10px #303030;之前

另外，看看这篇文章，你可以用box-shadow实现一些其他很酷的效果。