如何将盒子阴影添加到其高度的一半

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>

这是第四个值。正值将导致阴影扩大并变大，负值将导致阴影缩小。如果未指定，则为0（阴影将与元素的大小相同）。

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

Answer 2

这可能是一种简单的方法，有很多种可能性。

.parent{
  width: 200px;
  height: 200px;
  margin: 10px;
  position: relative;
}

.test {
  z-index: 2;
  width: 100%;
  position: relative;
  height: 100%;
  border: solid 1px red;
  background-color: white;
}

.halfshadow{
  position: absolute;
  width: 100%;
  top: 0;
  height: 50%;
  box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5);
}

<div class="parent">
  <div class="test"></div>
  <div class="halfshadow"></div>
</div>