在整个 DIV 周围添加 CSS 框阴影

Add CSS box shadow around the whole DIV

提问by Warface

Is it possible to have the shadow surround the entire DIV?

是否可以让阴影围绕整个 DIV？

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

I know the order of attributes goes:

我知道属性的顺序是：

• Horizontal offset
• Vertical offset
• Blur radius
• Color

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

But I wonder if it's possible to make the shadow go all around it instead of showing up only on one edge or side.

但我想知道是否有可能让阴影围绕它而不是只出现在一个边缘或一侧。

回答by BoltClock

You're offsetting the shadow, so to get it to uniformly surround the box, don't offset it:

你正在抵消阴影，所以为了让它均匀地包围盒子，不要抵消它：

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

回答by zzzzBov

Yes, don't offset vertically or horizontally, and use a relatively large blur radius: fiddle

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

Also, you can use multiple box-shadows if you separate them with a comma. This will allow you to fine-tune where they blur and how much they extend. The example I provide is indistinguishable from a large outline, but it can be fine-tuned significantly more: fiddle

此外，如果用逗号分隔它们，则可以使用多个框阴影。这将允许您微调它们模糊的位置以及它们延伸的程度。我提供的示例与 large 没有区别outline，但可以进行更多的微调：fiddle

You missed the last and most relevant property of box-shadow, which is spread-distance. You can specify a value for how much the shadow expands or contracts (makes my second example obsolete): fiddle

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

The full property list is:

完整的属性列表是：

box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-distance] [color] inset?

框阴影：[水平偏移] [垂直偏移] [模糊半径] [传播距离] [颜色] 插入？

But even better, read through the spec.

但更好的是，通读规范。

回答by Priyanka Thakur

Just use the below code. It will shadow surround the entire DIV

只需使用下面的代码。它将阴影环绕整个 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);

Hope this will work

希望这会奏效

回答by Dan Marichal

The CSS code would be:

CSS 代码将是：

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

That will shadow the entire DIV no matter its shape!

无论其形状如何，这都会影响整个 DIV！

回答by Narendra Reddy

Use this below code

使用下面的代码

 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;

Explanation:-

解释：-

box-shadow requires you to set the horizontal & vertical offsets, you can then optionally set the blur and colour, you can also choose to have the shadow inset instead of the default outset. Colour can be defined as hexor rgba.

box-shadow 要求你设置水平和垂直偏移，然后你可以选择设置模糊和颜色，你也可以选择让阴影插入而不是默认开始。颜色可以定义为hex或rgba。

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

box-shadow: inset/outset h-offset v-offset 模糊扩散颜色；

Explanation of the values...

值的解释...

inset/outset-- whether the shadow is inside or outside the box. If not specified it will default to outset.

inset/outset-- 阴影是在盒子里面还是外面。如果未指定，它将默认为开始。

h-offset-- the horizontal offset of the shadow (required value)

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

v-offset-- the vertical offset of the shadow (required value)

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

blur-- as it says, the blur of the shadow

模糊——正如它所说，阴影的模糊

spread-- moves the shadow away from the box equally on all sides. A positive value causes the shadow to expand, negative causes it to contract. Though this value isn't often used, it is useful with multiple shadows.

传播- 将阴影在所有侧面均等地从盒子上移开。正值导致阴影扩大，负值导致阴影收缩。虽然这个值不经常使用，但它对多个阴影很有用。

color-- as it says, the color of the shadow

颜色——正如它所说，阴影的颜色

Usage

用法

box-shadow:2px 3px 8px #eee; a gray shadow with a horizontal outset of 2px, vertical of 3px and a blur of 8px

box-shadow:2px 3px 8px #eee; 水平起点为 2px，垂直起点为 3px，模糊度为 8px 的灰色阴影