四个方面的CSS框阴影

Question

我在这里有这个课程，我使用的盒子阴影效果很好，但是它只显示两侧的阴影，是否可以在四边获得阴影？

谢谢， Ĵ

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

Answer 1

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

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

Answer 2

箱阴影

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

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

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

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

更多关于阴影

支持最新浏览器的影子的主要前缀为box-shadow。

我建议将其他2个用于较旧的Mozilla和Webkit：

• -moz-box-shadow
• -webkit-box-shadow

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

Answer 3

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

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

Answer 4

尝试：box-shadow：0 0 10px 10px＃000000;

Answer 5

你需要指定box-shadow：10px 10px 10px 10px BLACK;

右，下，左，上

或者你可以说box-shadow-top：10px BLACK;等