将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/