【问题标题】：Add CSS box shadow around the whole DIV在整个 DIV 周围添加 CSS 框阴影
【发布时间】：2019-11-05 08:16:45
【问题描述】：

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

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

我知道属性的顺序是：

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

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

【问题讨论】：

为什么 Mozilla 和 WebKit 是 5px 模糊，而其他的是 3px？
因为测试时我在 Chrome 上，所以我只更改了 box-shadow... 抱歉

标签： css

【解决方案1】：

你正在偏移阴影，所以要让它均匀地围绕盒子，不要偏移它：

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

【讨论】：

做同样的事情，但不要模糊；做box-shadow:0 0 0 3px #ccc;（注意额外的0）。

【解决方案2】：

可以，不要垂直或水平偏移，并使用比较大的模糊半径：fiddle

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

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

完整的属性列表是：

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

但更好的是，请通读spec。

【讨论】：

【解决方案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);

希望这会奏效

【讨论】：

【解决方案4】：

CSS 代码是：

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

无论它的形状如何，它都会覆盖整个 DIV！

【讨论】：

这个方案不错

【解决方案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 需要你设置水平和垂直偏移，然后你可以选择设置模糊和颜色，你也可以选择设置阴影插图而不是默认的起点。颜色可以定义为 hex 或 rgba。

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

数值解释...

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

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

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

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

spread -- 将阴影从盒子的四周均匀地移开。正值导致阴影扩大，负值导致阴影收缩。虽然这个值不经常使用，但它对多个阴影很有用。

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

用法

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

【讨论】：