将CSS3 box-shadow设置为不在div之上

Question

我有一个带有框阴影的div框，其中包含以下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;

如何制作框阴影仅适用于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;

的示例