css - 所有四个侧面的 CSS 盒子阴影

Question

我在这里有这门课，我使用 box-shadow 效果很好，但它只显示两侧的阴影，是否可以在所有四个侧上获得阴影？

谢谢，J

.contactBackground{
    background-color:#FFF;
    padding:20px;
    box-shadow: 10px 10px 10px #000000;
}

score 14 · Accepted Answer

如果将偏移设置为零，则阴影在所有四个边上都将相等。

.contactBackground{
    background-color:#FFF;
    padding:20px;
    box-shadow: 0 0 10px #000000;
}

score 9 · Accepted Answer

箱形阴影

CSS3 box-shadow 属性具有以下属性：（W3Schools）

box-shadow: h-shadow v-shadow blur spread color inset;

在您的示例中，您将阴影垂直和水平偏移 10px。

就像在其他评论中一样，将前两个值设置为 0px，以便在所有方面都有均匀的阴影。

shadow 支持最新浏览器的主要前缀是box-shadow.

我建议将另外 2 个用于较旧的 Mozilla 和 Webkit：

此外，通过使用rgba而不是十六进制颜色值，您可以设置阴影的 alpha/opacity： box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.3);

score 2 · Accepted Answer

移除偏移定义，只使用模糊半径（第三个参数）：

.contactBackground{
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px #000;
}

score 1 · Accepted Answer

1

试试：box-shadow: 0 0 10px 10px #000000;

于 2012-10-10T18:42:09.193 回答

score -1 · Accepted Answer

你需要指定 box-shadow: 10px 10px 10px 10px BLACK；

右、下、左、上

或者你可以说 box-shadow-top: 10px BLACK; ETC