使 box-shadow 比元素本身更宽

Question

是否可以使 box-shadow CSS 调用比我们应用它的 HTML 元素更宽，同时保持与我们应用它的元素相同的高度？我可以增加传播，但这会增加高度。正如您在我的代码段中看到的，box-shadow 的最大宽度仅与.boxdiv一样宽。为什么我们不希望框阴影比 HTML 元素更宽，或者为什么会有限制？

.container {
  background-color: gray;
  height: 100px;
  width: 100px;
}
.box {
  background-color: blue;
  height: 50px;
  width: 50px;
  box-shadow: 55px 0px 0px 0px rgba(0, 0, 0, .2);
}
.container-spread {
  background-color: gray;
  height: 100px;
  width: 100px;
}
.box-spread {
  background-color: blue;
  height: 50px;
  width: 50px;
  box-shadow: 55px 0px 0px 5px rgba(0, 0, 0, .2);
}

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

<br>
<br>

<div class="container-spread">
  <div class="box-spread">box</div>
  container
</div>

Answer 1

您可以利用伪元素放大元素然后应用box-shadow。height: 100%将确保 box-shadow 的高度与元素相同。该width值将是要更改的关键值。

.container {
  background-color: gray;
  height: 100px;
  width: 100px;
}
.box {
  background-color: blue;
  height: 50px;
  width: 50px;
  position: relative;
}
.box::after {
  box-shadow: 85px 0 0 0 rgba(0, 0, 0, 0.2);
  content: " ";
  height: 100%;
  position: absolute;
  left: -50%;
  top: 0;
  width: 150%;
}

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

Answer 2

虽然不可能使用该spread-radius值仅在水平或垂直方向上扩展阴影，但您可以向单个元素添加多个阴影，但唯一的缺点是任何重叠都会产生较暗的阴影区域。但只要稍加一点数学知识，你就可以轻松地将它们排列起来。

MDN 上的 box-shadow

.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue; 
    height:50px; 
    width:50px; 
    box-shadow:55px 0px 0px 0px rgba(0,0,0,.2),
               105px 0px 0px 0px rgba(0,0,0,.2),
               155px 0px 0px 0px rgba(0,0,0,.2) ; }

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