如何在四个方面应用盒子阴影？

Question

我正试图在所有四个方面都使用box-shadow。我只能在两方面得到它：

Answer 1

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

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

编辑（一年后......）：根据评论中的要求，使答案更具跨浏览性：）

顺便说一下：现在有很多css3发电机.. css3.me，css3maker，css3generator等......

Answer 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;
}

Answer 3

这看起来很酷。

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

Answer 4

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

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

Answer 5

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

Answer 6

理解盒子阴影语法并相应地编写

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

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

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

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

颜色：阴影的颜色-可选

spread：扩展半径。正值会增加阴影的大小，负值会减少阴影的大小-可选

插图：将阴影从外部阴影更改为内部阴影-可选

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

Answer 7

CSS3阴影盒：4面对称

1. 每面颜色相同

: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>

1. 每侧具有不同的颜色

: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>

屏幕截图

裁判

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

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

Answer 8

对所有四个方面使用此css代码： box-shadow：0px 1px 7px 0px rgb（106,111,109）;

Answer 9

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

Answer 10

以 (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

Answer 11

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

box-shadow: 0 0 0 width color;

例如：

box-shadow: 0 0 0 5px yellow;

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