css - 如何将框阴影添加到其高度的一半

Question

我正在尝试向 div 添加阴影。阴影应该在顶部和顶部高度的一半(到左侧和右侧)，请有人帮助我。

.test {
  width: 200px;
  height: 200px;
  margin: 10px;
  border: solid 1px red;
  position: relative;
  background-color: white;
}

Answer 1

您可以增加偏移量并减小框阴影的大小并绘制其中的 2 个。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

/* offset-x | offset-y | blur-radius | spread-radius | color */

<spread-radius>

This is a fourth value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

#test {
  width: 200px;
  height: 200px;
  margin: 10px;
  border: solid 1px red;
  position: relative;
  background-color: white;
  box-shadow: -50px -50px 5px -50px, 50px -50px 5px -50px
}

<div id="test"></div>