如何让div的内阴影覆盖其子元素？适配复杂可滚动div场景

这个问题我之前做复杂滚动容器的时候也踩过坑！默认情况下，元素的内阴影(box-shadow: inset)是绘制在内容层下方的，所以所有子元素都会妥妥盖在阴影上面，完全达不到你要的“阴影覆盖内容”的效果。不过别担心，用伪元素模拟内阴影是最靠谱的解决方案，完美适配你说的复杂可滚动场景，下面给你一步步讲清楚：

核心思路就是给父div加一个绝对定位的伪元素，把内阴影画在这个伪元素上，然后让它“浮”在所有子元素的上方，同时保证不影响滚动和子元素的交互。

直接上可复用的代码示例：

/* 父容器样式 */
.scroll-container {
  position: relative; /* 必须加，让伪元素能相对它定位 */
  width: 400px;
  height: 300px;
  overflow-y: auto; /* 你的滚动设置 */
  padding: 20px; /* 如果有内边距也不影响 */
}

/* 关键：用伪元素画内阴影 */
.scroll-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6); /* 替换成你想要的阴影样式 */
  pointer-events: none; /* 重中之重！让伪元素不拦截鼠标事件，子元素的点击、输入都能正常用 */
  z-index: 1; /* 确保伪元素在所有子元素之上（子元素默认z-index为0） */
}

/* 子元素正常写样式就行，不用额外调整 */
.scroll-container .child-item {
  margin-bottom: 15px;
  padding: 10px;
  background: #fff;
  /* 其他子元素样式... */
}

为啥这个方法好用？

• 不管你的子元素有多少、是什么类型（文本、图片、按钮啥的），伪元素都会稳稳覆盖在最上层
• 滚动容器滚动时，伪元素会跟着容器边界一起移动，阴影始终完整覆盖可视区域
• pointer-events: none保证了子元素的所有交互都不受影响，完全不会出现点不动、滚不了的问题

如果你对颜色要求不高，也可以试试用mix-blend-mode来实现，但这个方法有局限性——会改变子元素的颜色，所以只适合一些特殊场景：

.scroll-container {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
  background-color: #fff; /* 必须设置背景色，混合模式才会生效 */
}

.scroll-container .child-item {
  mix-blend-mode: multiply; /* 可以根据需求换其他混合模式，比如darken */
}

这个方法不用额外加伪元素，但子元素的颜色会和阴影混合，可能不符合你的设计需求，所以还是优先推荐第一种方法。

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