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

Question

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

如果有人已经解决了，请帮忙。谢谢。

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

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

Answer 1

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

第一个 box-shadow 应该有一个负的水平宽度，第二个 box-shadow 应该有一个正的水平宽度。这是 box-shadow 速记中的第一个值。

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

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

希望对您有所帮助! :)