设置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的左，右和底部?

Answer 1

ONE div 不能这样做。

编辑

box-shadow不允许同时出现左右阴影。

有一个技巧，虽然…读下去。

规则有四个值:

1. 定义阴影的水平偏移量。
2. 定义垂直偏移量。
3. 定义模糊距离
4. 定义扩展

这都是真的。然而，经过一些测试，我发现你可以图层阴影。

你所需要做的就是用逗号分隔值。

对于一个div的左，右，下阴影，你可以这样做

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

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

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>

http://jsfiddle.net/5rbrB/这里有一个使用overflow: hidden;和padding-top: 0;的例子