设置CSS3的box-shadow不要盖在div上方

Question

我有一个div框，周围设置了box-shadow效果，CSS代码如下：

-moz-box-shadow: 1px 1px 15px #415a68;
-webkit-box-shadow: 1px 1px 15px #415a68;
-khtml-box-shadow: 1px 1px 15px #415a68;
box-shadow: 1px 1px 15px #415a68;

我该怎么做才能让 box-shadow 只应用于 div 元素的左侧、右侧和底部？

- Tim

---

这个回答解决了你的问题吗？CSS3问题：如何在div的顶部没有阴影？ - Vega

Answer 1

你不能使用一个div完成这个功能。

编辑：

box-shadow不允许同时使用右边和左边的阴影。

不过，有一个技巧...请继续阅读。

该规则包含四个值：

1. 定义阴影的水平偏移量。+值表示右侧阴影，-值表示左侧阴影。 2. 定义阴影的垂直偏移量。+值表示底部阴影，-值表示顶部阴影。 3. 定义模糊距离 4. 定义扩展距离

这些都是真实的。但是，在进行了一些测试后，我发现您可以叠加阴影。

你只需要用逗号分隔值。

因此，对于一个div上的左、右和底部阴影，你可以这样做：

box-shadow: -5px 5px 3px black, 5px 5px 3px black;

例子： http://jsfiddle.net/jasongennaro/HWCzJ/1/

（本段为示例网址）

- Jason Gennaro

---

谢谢，这个方法对顶部阴影很有效。使用这种方法是否可以去掉底部阴影？ - ᴍᴇʜᴏᴠ

Answer 2

div div
{
    box-shadow: 1px 1px 15px #415a68;   
    height: 100px;
    width: 100px;
}
div
{
    overflow: hidden;
    padding: 10px;
    padding-top: 0;
}

<div>
  <div></div>
</div>

这里是一个使用overflow:hidden;和padding-top:0;的示例。

- Joe

---

运行得非常好！谢谢！ - lov2code