【问题标题】：How to apply box-shadow on all four sides?如何在所有四个面上应用 box-shadow？
【发布时间】：2022-04-07 19:07:02
【问题描述】：

我正在尝试在所有四个方面应用box-shadow。我只能从两个方面得到它：

【问题讨论】：

CSS3please.com 对这类东西总是有帮助...

【解决方案1】：

这是因为 x 和 y 偏移。试试这个：

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

编辑（一年后..）：按照 cmets 的要求，使答案更加跨浏览器:)

顺便说一句：现在有很多 css3 生成器.. css3.me、css3maker、css3generator 等等……

【讨论】：

+1，因为您可以更快地得到正确答案，尽管它在较小的半径和散布值下看起来确实更好。
谢谢。我正在查看您的第一个答案并认为我的问题是错误的:)
你应该让你的答案更加跨浏览器。
我不知道为什么，但这对我不起作用。当我使用它时，我没有得到盒子阴影。如果我使用@thirtydot 发布的答案，那么它可以工作。如果前两个值为 0，则必须进行模糊和扩散。这发生在 Chrome 中。
@thirtydot - 你是对的，背景较浅，你可以看到它。但如果你的背景是黑色的，你根本看不到它。所以我想我不应该说它不起作用。但是当你有黑色背景时，如果没有传播，它肯定是不可见的，不管盒子阴影的颜色如何。即使使用红色，您的边框也会略带红色，但没有“可见”的框阴影。因此，如果您的背景较浅，那么我想这个解决方案会起作用。对于非常暗的背景，此解决方案不可靠。 jsfiddle.net/vkzd71rc 与 jsfiddle.net/vkzd71rc/1

【解决方案2】：

见：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 - 具体来说，它是“传播半径”。
小提琴创造者 - MVP。

【解决方案3】：

就像这段代码一样简单：

box-shadow: 0px 0px 2px 2px black; /*any color you want*/

【讨论】：

【解决方案4】：

这看起来很酷。

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;

【讨论】：

【解决方案5】：

理解 box-shadow 语法并相应地编写它

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

h-offset：阴影的水平偏移量。正值将阴影放在框的右侧，负值将阴影放在框的左侧 - 必需

v-offset：阴影的垂直偏移量。正值将阴影置于框下方，负值将阴影置于框上方 - 必需

blur：模糊半径（数字越大，阴影越模糊）- 可选

color：阴影的颜色 - 可选

spread：传播半径。正值增大阴影大小，负值减小阴影大小 - 可选

inset：将阴影从外阴影更改为内阴影 - 可选

box-shadow: 0 0 10px #999;

box-shadow 更适合散布

box-shadow: 0 0 10px 8px #999;

使用 'inset' 在框内应用阴影

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

【讨论】：

【解决方案6】：

最简单的解决方案和最简单的方法是为所有四个边添加阴影。 CSS

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/

【讨论】：

【解决方案7】：

我找到了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);
}

【讨论】：

它适合作为本网站的其他答案，但正如您所努力的那样，我正在投票给您的答案。

【解决方案8】：

CSS3 box-shadow：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);
}

&lt;div class="four-sides-with-same-color"&gt;&lt;/div&gt;

每一面都有不同的颜色

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

&lt;div class="four-sides-with-different-color"&gt;&lt;/div&gt;

截图

参考

https://css-tricks.com/almanac/properties/b/box-shadow/

https://www.cnblogs.com/xgqfrms/p/13264347.html

【讨论】：

【解决方案9】：

在所有四个方面都使用此 css 代码： box-shadow: 0px 1px 7px 0px rgb(106, 111, 109);

【讨论】：

【解决方案10】：

您可以在以下链接中进行不同的组合。
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);

【讨论】：

【解决方案11】：

以 (v1)px (v2)px (v3)px (v4)px 为例。 v1px 当正值给出右侧阴影，而负值给出左侧阴影。 v2px 当正值给出顶侧阴影，而负值给出底侧阴影。 v3 用于制作阴影模糊。 10px 会使阴影比 5px 更模糊，依此类推所以使用下面样式的 div (mydiv)。我们会得到下面的图片

box-shadow:
30px 0px 5px 0px red,
0px 30px 5px 0px blue,
-30px 0px 5px 0px green,
0px -30px 5px 0px yellow;
width:200px;
height:200px;
margin-left:100px;
}

<br><br>

<div class="mydiv"></div>

This should give you the div below
view the result from this link: https://i.stack.imgur.com/bUjRN.jpg

【讨论】：

【解决方案12】：

将此行添加到您的框样式中。

box-shadow: 0 0 0 width color;

例如：

box-shadow: 0 0 0 5px yellow;

您可以在这里找到更多详细信息MDN Web Docs - Setting zero for offset and blur

【讨论】：

【解决方案13】：

使 x 和 y 偏移为负，以便在容器的左侧和顶部也应用阴影。

div { box-shadow: 1px 1px 1px 1px #BDBDBD, -1px -1px 1px 1px #BDBDBD; }

在上面的代码块中，

1px 1px 1px 1px #BDBDBD 用于在右侧和底部添加阴影。
-1px -1px 1px 1px #BDBDBD 用于在顶部和左侧添加阴影。

【讨论】：

【解决方案14】：

就这么简单：

box-shadow: 3px 3px 5px rgb(186 195 78), -3px -3px 5px rgb(186 195 78);

【讨论】：