使用以下代码

Question

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

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

我知道属性的顺序是：

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

但是我想知道是否有可能让阴影四处走动而不是只出现在一个边缘或一侧。

Answer 1

只是抵消零点？

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

Answer 2

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

此外，如果用逗号分隔，则可以使用多个框阴影。这将允许您微调它们模糊的位置和扩展的程度。我提供的示例与大型outline无法区分，但可以进一步微调：fiddle

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

完整的属性列表是：

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

但更好的是，请仔细阅读spec。

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);

希望这会起作用

Answer 4

使用以下代码

 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 。

框阴影：插入/偏移h偏移v偏移模糊扩展色；

值的说明...

插入/插入-阴影位于框内还是框外。如果未指定，则默认为一开始。

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

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

模糊-就像阴影所说的那样

展开-将阴影均匀地从盒子的各个侧面移开。正值会使阴影扩大，负值会使阴影缩小。尽管不经常使用此值，但对于多个阴影它很有用。

颜色-如所说，阴影的颜色

用法

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

Answer 5

CSS代码为：

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

无论其形状如何，这都会遮盖整个DIV！

Answer 6

.allSides
{
width:350px;height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

在悬停时使用它可以查看其实际效果，这将使div带有边框和阴影。

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

6 个答案:

使用以下代码

说明：-

用法