如何在div元素上设置一个box-shadow，包括四个方向的阴影：左侧阴影、右侧阴影、顶部阴影和底部阴影？

Question

我无法创建另一个父级div容器，只使用css技巧是否可能？box-shadow: 7px 7px 7px black; 只会在右边和底部的边框上创建阴影，但我也需要左边和顶部。

有没有可能只使用CSS技巧来实现这个效果呢？

- Stasonix Niculin

---

从四面八方投射阴影？为什么不能简单地使用边框或图像来创建这种效果呢？我不确定是否可以在一个 div 上组合两个阴影。 - OptimusCrime

因为我的背景颜色是通过动画动态变化的，这并不是一个好的做法。 - Stasonix Niculin

看一下这个：https://dev59.com/tXA75IYBdhLWcg3wH1JB - Frederick Behrends

部分透明的背景图像作为阴影？ - OptimusCrime

Answer 1

使用阴影效果时，有4个参数：偏移量、模糊半径、扩散半径和颜色。

这是我在网站上使用的代码。它生成一个偏移量为0，模糊半径为0，扩散半径为8px，颜色为灰色的阴影。

 box-shadow: 0 0 8px #888888;
-moz-box-shadow: 0 0 8px #888888;
-webkit-box-shadow: 0 0 8px #888888;

以下是一个快速示例，展示对图像的效果。

http://www.css3.info/preview/box-shadow/

- Casey Robinson

Answer 2

试试这个

box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;

或者

你可以使用shadowOn。它是一个很棒的jQuery插件，非常易于使用。

- Rohan Patil