Question

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

.box

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

Answer 1

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 2

虽然box-shadow确实有传播设置，但它适用于所有方面。据我所知，没有办法只调整盒子阴影的水平或垂直尺寸。

您可以使用两个（或更多）框阴影来实现效果，但实际上只有在展开设置为0时才适用

.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),
     5px 0px 0px 0px rgba(0,0,0,.2); }

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

Answer 3

虽然无法使用spread-radius值在水平或垂直方向上扩展阴影，但您可以为单个元素添加多个阴影，唯一的缺点是任何重叠都会产生以下区域：更暗的阴影。但是通过一些数学运算，你可以很容易地将它们排成一行。

box-shadow at MDN

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

Answer 4

也许你需要这个

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

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

使盒子阴影比元素本身更宽

4 个答案: