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;

第一组给右边带阴影＆amp;底部，而第二组给左边带阴影（使用负值）＆amp;底部。

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

-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

只需vertical offset only：

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

这会将阴影向下移动，使顶部的阴影更少。您必须使用它才能在您的情况下以您想要的方式获得它。 This site还有关于框阴影的一些很好的信息，例如分层，以及浏览器支持。

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

3 个答案: