在整个DIV周围添加CSS盒子阴影

Question

是否有可能使阴影环绕整个DIV？

-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;

我知道属性的顺序是：

• 水平偏移量
• 垂直偏移量
• 模糊半径
• 颜色

但我想知道是否可能使阴影出现在物体的周围而不仅仅是显示在一个边缘或侧面上。

- Warface

---

为什么Mozilla和WebKit要使用5像素的模糊，而其他浏览器只需要3像素？ - BoltClock

因为我在使用Chrome测试它时，所以我只更改了盒子阴影... 抱歉。 - Warface

Answer 1

您正在偏移阴影，为了使其均匀地环绕该框，请不要偏移它：

-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;

- BoltClock

---

请完成同样的事情，但是不要模糊；使用box-shadow:0 0 0 3px #ccc;（注意额外的0）。 - www139

Answer 2

是的，不要在垂直或水平方向上进行偏移，并使用相对较大的模糊半径：fiddle

此外，您可以使用多个box-shadow，如果用逗号分隔它们，这将允许您微调它们模糊的位置和扩展程度。我提供的示例与大型outline无异，但可以进行更精细的调整：fiddle

您错过了box-shadow最后且最相关的属性，即spread-distance。您可以为阴影扩展或收缩指定一个值（使我的第二个示例过时了）：fiddle

完整的属性列表如下：

box-shadow: [水平偏移量] [垂直偏移量] [模糊半径] [扩展距离] [颜色] inset?

但是，更好的方法是阅读规范。

- zzzzBov

Answer 3

只需使用以下代码。它将阴影围绕整个DIV。

-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);

希望这能够起作用。

- Priyanka Thakur

Answer 4

CSS代码如下：

box-shadow: 0 0 10px 5px white;

这将会阴影整个DIV，无论其形状如何！

- Dan Marichal

---

这个解决方案很好。 - austingae

Answer 5

使用以下代码：

 border:2px soild #eee;

 margin: 15px 15px;
 -webkit-box-shadow: 2px 3px 8px #eee;
-moz-box-shadow: 2px 3px 8px #eee;
box-shadow: 2px 3px 8px #eee;

说明：

box-shadow 属性需要设置水平和垂直偏移量，然后可以选择设置模糊和颜色，还可以选择将阴影镶嵌在元素内部而不是默认的外部。颜色可以用 十六进制 或 RGBA 来定义。

box-shadow : [inset/outset] h-offset v-offset blur spread color;

各值的说明...

inset/outset -- 阴影是否在元素内部或外部。如果未指定，默认值是 outset（外部）。

h-offset -- 阴影的水平偏移量（必填值）

v-offset -- 阴影的垂直偏移量（必填值）

blur -- 模糊程度

spread -- 把阴影向四周等距离地扩展。正数会使阴影扩大，负数会使其收缩。虽然此值并不经常使用，但在多个阴影时很有用。

color -- 阴影的颜色

用法

box-shadow:2px 3px 8px #eee; 表示一个灰色阴影，水平偏移量为 2px，垂直偏移量为 3px，模糊程度为 8px。

- Narendra Reddy