如何仅使用重复框在左侧和右侧创建框阴影？

Question

我试图找到解决方案如何使用box-shadow显示阴影左侧和框上的框。我在底部的问题阴影看起来比较暗，然后是左右。

如果有人已经有解决方案，请帮助。谢谢。

＆＃13;

＆＃13;

    .box {
    	margin:0;
    	box-shadow: 0px 12px 15px 0 #7f7e7f, 0px 7px 2px -1px #7f7e7f;
    	height: 150px;
    	width: 50%;
    	background: #cff;
    }

＆＃13;

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要做的是使用两个不同的盒子阴影。一个用于左侧，一个用于右侧。这两个框阴影应该用逗号分隔。

第一个框阴影应具有负水平宽度，第二个框阴影应具有正水平宽度。这是box-shadow简写中的第一个值。

＆＃13;

＆＃13;

.box {
  margin: 0;
  box-shadow: -10px 0px 0px 0 #7f7e7f, 10px 0px 0px 0 #7f7e7f;
  height: 150px;
  width: 50%;
  background: #cff;
}

＆＃13;

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）

Answer 2

以下是代码。希望这是一个很好的帮助：）

＆＃13;

＆＃13;

.box {
  margin: 0;
  box-shadow: -10px 0px 0px 0 rgba(0,0,0,0.2), 10px 0px 0px 0 rgba(0,0,0,0.2);
  height: 150px;
  width: 50%;
  background: #cff;
}

＆＃13;

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以简单地使用Box-Shadow generator，使用它非常简单快捷

示例：

＆＃13;

＆＃13;

.box {
  margin: 0;
  box-shadow: -24px 11px 60px -22px rgba(0, 0, 0, 1), 24px 11px 60px -22px rgba(0, 0, 0, 1);
  height: 150px;
  width: 50%;
  background: yellow;
}

＆＃13;

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;