所有四个边上的 CSS 框阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12825324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS box-shadow on all four sides
提问by user1269625
I have this class here and I using box-shadow which works fine, but it only shows the shadow on 2 sides, is there away to get the shadow on all four sides?
我在这里有这个课程，我使用 box-shadow 效果很好，但它只显示两侧的阴影，是否可以在所有四个侧面上获得阴影？
Thanks, J
谢谢，J
.contactBackground{
background-color:#FFF;
padding:20px;
box-shadow: 10px 10px 10px #000000;
}
回答by Kevin Boucher
If you set the offsets to zero, the shadow will be equal on all four sides.
如果将偏移设置为零，则所有四个边的阴影都将相等。
.contactBackground{
background-color:#FFF;
padding:20px;
box-shadow: 0 0 10px #000000;
}
回答by Kirill
Box-Shadow
箱影
CSS3 box-shadow property has following attributes: (W3Schools)
CSS3 box-shadow 属性具有以下属性：（W3Schools）
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: h-shadow v-shadow blur spread color inset;
In your example you're offsetting shadow by 10px vertically and horizontally.
在您的示例中，您将阴影垂直和水平偏移 10 像素。
Like in other comments set first two values to 0px in order to have even shadow on all sides.
就像在其他评论中一样，将前两个值设置为 0px 以便在所有方面都有均匀的阴影。
More on Shadows
更多关于阴影
The main prefix for shadow to support latest browsers is box-shadow.
支持最新浏览器的 shadow 的主要前缀是box-shadow.
There are 2 other ones that I recommend to use for older Mozilla and Webkit:
我建议将另外 2 个用于较旧的 Mozilla 和 Webkit：
-moz-box-shadow-webkit-box-shadow
-moz-box-shadow-webkit-box-shadow
Also, by using rgbainstead of hex color value you can set the alpha/opacity of the shadow:
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.3);
此外，通过使用rgba代替十六进制颜色值，您可以设置阴影的 alpha/opacity：
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.3);
回答by BenM
Remove the offset definitions, and use only the blur radius (the third argument):
删除偏移定义，并仅使用模糊半径（第三个参数）：
.contactBackground{
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px #000;
}
回答by Xarcell
Try: box-shadow: 0 0 10px 10px #000000;
尝试： box-shadow: 0 0 10px 10px #000000;
回答by Gene Parmesan
you need to specify box-shadow: 10px 10px 10px 10px BLACK;
你需要指定 box-shadow: 10px 10px 10px 10px BLACK;
Right, Bottom, Left, Top
右、下、左、上
or you could say box-shadow-top: 10px BLACK; etc
或者你可以说 box-shadow-top: 10px BLACK; 等等
