CSS3问题:如何在div的顶部没有盒子阴影？

Question

现在当我这样做:

-moz-box-shadow: 0 0 200px #00C0FF;
-webkit-box-shadow: 0 0 200px #00C0FF;
box-shadow: 0 0 200px #00C0FF;

它在所有方面都给出了一个盒子阴影.我希望它在三面但不是顶部.如何防止阴影出现在顶部？

Answer 1

box-shadow支持多个逗号,这意味着这是可能的,可以像下面这样完成:

box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

第一组带阴影到右边和底部,而第二组带阴影到左边(使用负值)和底部.

跨浏览器支持的完整代码是:

-moz-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
-webkit-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

Answer 2

如果你可以嵌套两个div,那么你应该能够使用边距的组合并overflow:hidden"切掉"顶部阴影,而不会在其他边缘上失去所需的效果.

例如这个加价:

<div class="outer">
    <div class="inner">hello</div>
</div>

而这个CSS

.outer {
    margin-top: 200px;
    overflow: hidden;   
}

.inner {
    width:200px;
    height: 200px;
    margin: 0 200px 200px 200px;
    -moz-box-shadow: 0px 5px 200px #00C0FF;
    -webkit-box-shadow: 0px 5px 200px #00C0FF;
    box-shadow: 0px 5px 200px #00C0FF;
}

给出了这个结果 - http://jsfiddle.net/ajcw/SLTE7/2/

Answer 3

只有一个垂直偏移:

.shadow {
  -moz-box-shadow: 0px 5px 200px #00C0FF;
  -webkit-box-shadow: 0px 5px 200px #00C0FF;
  box-shadow: 0px 5px 200px #00C0FF;
}

这将使阴影向下移动,使顶部的阴影更少.您必须使用它才能在您的情况下以您想要的方式获得它.该网站还有一些关于框阴影的精彩信息,例如分层,以及浏览器支持.