css - Having a crisp edge at the top of a box shadow via CSS?

Question

I'm using the following css technique to design a box shadow around a div element...

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

But is there a way to tell the css to stop the shadow effect at the top of the div? I just want to the left, right and bottom of the div element to have the effect.

Thanks for any advice

Answer 1

演示

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

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

盒子阴影：0 10px 10px #303030;

此外，请查看本文了解您可以使用 box-shadow 实现的其他一些很酷的效果。

Answer 3

为了完全摆脱顶部阴影而不延长底部阴影，我的解决方案是在 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/