CSS内阴影滚动容器中Input穿透阴影问题求助

我给设置了overflow: auto的容器添加了底部内阴影，用来提示容器可滚动，但容器内的input元素会覆盖这个阴影，调整z-index也没用。相关代码如下：

CSS代码 #

#box {
  width: 500px;
  height: 100px;
  box-shadow: 0px -6px 8px #888888 inset;
  overflow: auto;
}

HTML代码 #

<div id="box">
  Some text<br>This text is so good<br>OMG this text is just epic<br>
  No way, more text?<br>Wow, this text is driving me crazy<br>
  <input><br>
  More text here as well.
</div>

解决方案 #

问题根源在于inset内阴影是绘制在容器背景和内容之间的，当input这类带有不透明背景的元素滚动到阴影区域时，就会把阴影挡住。可以通过以下方法解决：

方法一：用伪元素模拟内阴影 #

给容器添加一个绝对定位的伪元素，专门用来显示阴影，同时设置pointer-events: none避免干扰输入框的交互：

#box {
  width: 500px;
  height: 100px;
  overflow: auto;
  position: relative; /* 为伪元素提供定位上下文 */
}

#box::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px; /* 阴影覆盖的高度，可根据需求调整 */
  box-shadow: 0px -6px 8px #888888 inset;
  pointer-events: none; /* 让点击穿透到下方元素 */
}

这个方法不需要修改input的样式，阴影会始终显示在内容上层，不会被遮挡。

方法二：调整input的背景透明度（可选） #

如果可以接受input背景透明，也可以直接给input设置半透明或完全透明的背景，让阴影透出来：

#box input {
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色 */
  /* 或者完全透明：background-color: transparent; */
}

这种方法更简单，但会改变input的默认视觉样式，需要根据设计需求调整。

内容的提问来源于stack exchange，提问作者user9102437