Question

将此css用于阴影

-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;

如何从div的顶部和底部移除阴影并仅留下水平阴影？这可能吗？

Answer 1

是和否。盒子阴影不能放在元素的一边，除非你只是偏移它和/或改变传播，我怀疑这不是你想要的。

但是，您可以将元素放在容器中，并在其上设置溢出。溢出属性会影响框阴影。 Here's an example

Answer 2

有两种方法可以做到这一点，但这取决于你是在寻找硬边还是软边。

方法一：

这里的诀窍是将您的盒子包装在容器中并将overflow:hidden应用于容器。如果你给你的盒子左右边距与阴影距离相同，那么阴影只能在两侧看到;它将被夹在顶部和底部。

这是一个例子： http://jsfiddle.net/2Luef/1/

方法二：

或者，根据您正在寻找的效果，您可以使用多个框阴影执行此操作： http://jsfiddle.net/2Luef/3/

它没有像上面那样的剪裁，但它可以说是一个更好的外观。它也只使用一个DOM元素。

Answer 3

您可以使用负值作为展开值（最后一个px值），以使阴影不会扩散到另一侧。但是，这只会让你将阴影添加到一边;所以你可以添加多个阴影，用逗号分隔。

box-shadow: 10px 0 10px -10px #000, -10px 0 10px -10px #000;

有关详细信息，请查看以下两个链接：

Answer 4

像这样写：

<强> CSS：

.parent{
 height:200px;
 margin:40px;
    overflow:hidden;
}
.child{
width:200px;
height:200px;
background-color:#e0ffff;
-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;
margin:0 20px;
}

<强> HTML

<div class="parent">
    <div class="child"></div>
</div>

检查此http://jsfiddle.net/k9kVZ/2/

CSS3框阴影问题

4 个答案: