我正在尝试box-shadow在所有四个方面都应用a 。我只能从两方面得到它：
如何在所有四个侧面应用盒形阴影？
Answers:
这是因为x和y偏移。试试这个：
-webkit-box-shadow: 0 0 10px #fff;
box-shadow: 0 0 10px #fff;
编辑（一年后..）：根据评论的要求，使答案更加跨浏览器：）
顺便说一句：如今有很多css3生成器.. css3.me，css3maker，css3generator等...
+1是因为您可以更快地获得正确的答案，尽管半径和散布值较小时看起来确实更好。
—
2011年
谢谢。我在看您的第一个答案并认为，我把问题弄错了:)
—
Damb 2011年
您应该使您的答案更加跨浏览器。
—
卢卡斯
我不确定为什么，但这对我不起作用。使用此方法时，没有阴影。如果我使用@thirtydot发布的答案，那么它可以工作。如果前两个值为0，则必须具有模糊和散布效果。这是在Chrome中发生的。
—
查尔斯·威廉姆斯
@thirtydot-是的，背景较浅，可以看到它。但是，如果您的背景是黑色，则根本看不到它。所以我想我不应该说这行不通。但是，无论框阴影的颜色如何，当您具有黑色背景时，如果没有扩散，则绝对不可见。即使显示为红色，您的边框也会显示为红色，但没有“可见”的框阴影。因此，如果您的背景较浅，那么我认为此解决方案会起作用。对于非常暗的背景，此解决方案不可靠。jsfiddle.net/vkzd71rc与jsfiddle.net/vkzd71rc/1
—
Charles Williams
请参阅：http：//jsfiddle.net/thirtydot/cMNX2/8/
input {
-webkit-box-shadow: 0 0 5px 2px #fff;
-moz-box-shadow: 0 0 5px 2px #fff;
box-shadow: 0 0 5px 2px #fff;
}
我知道3值+颜色的框阴影中的每个值是什么。这4个值代表什么？
—
蜻蜓
阅读：developer.mozilla.org/En/CSS/Box-shadow-具体来说，它是“扩展半径”。
—
2011年
小提琴创作者-MVP。
—
Terrance00
这看起来很酷。
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
了解盒子阴影语法并相应地编写
box-shadow: h-offset v-offset blur spread color;
h-offset：阴影的水平偏移。正值将阴影放置在框的右侧，负值将阴影放置在框的左侧-必需
v-offset：阴影的垂直偏移。正值将阴影放在框的下方，负值将阴影放在框的上方-必需
blur：模糊半径（数字越大，阴影越模糊）-可选
color：阴影颜色-可选
传播：传播半径。正值会增加阴影的大小，负值会减少阴影的大小-可选
插图：将阴影从外部阴影更改为内部阴影-可选
box-shadow: 0 0 10px #999;
盒子阴影与传播效果更好
box-shadow: 0 0 10px 8px #999;
使用“插入”在框内应用阴影
box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;
使用rgba（红色绿色蓝色alpha）更有效地调整阴影
box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8);
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);
最简单的解决方案和最简单的方法是为所有四个侧面添加阴影。的CSS
box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/
我找到了http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/网站。
.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);
}
它适合作为本网站中的其他答案，但是随着您的努力，我将对您的答案进行投票。
—
blueray 2014年
CSS3阴影：4面对称
- 每边颜色相同
:root{
--color: #f0f;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background: #ccc;
}
.four-sides-with-same-color {
box-shadow: 0px 0px 10px 5px var(--color);
}<div class="four-sides-with-same-color"></div>
- 每侧都有不同的颜色
:root{
--color1: #00ff4e;
--color2: #ff004e;
--color3: #b716e6;
--color4: #FF5722;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background-color: rgba(255,255,0,0.7);
}
.four-sides-with-different-color {
box-shadow:
10px 0px 5px 0px var(--color1),
0px 10px 5px 0px var(--color2),
-10px 0px 5px 0px var(--color3),
0px -10px 5px 0px var(--color4);
}<div class="four-sides-with-different-color"></div>屏幕截图
裁判
将此css代码用于所有四个方面：box-shadow：0px 1px 7px 0px rgb（106，111，109）;
您可以在以下链接中使用不同的组合。
https://www.cssmatic.com/box-shadow
您需要的结果可以通过以下CSS来实现
-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);