CSS box-shadow滚动时未被遮挡 如何仅在元素可见区域显示阴影

问题原因 #

box-shadow默认绘制在元素盒模型的外部区域，不属于元素本身的content/padding/border范围。当元素被上层模块遮挡时，元素本身的可视区域被盖住，但溢出到上层模块范围内的阴影部分不会被自动裁剪，就会出现阴影漏出的问题。

可行解决方案 #

1. 给上层遮挡元素添加overflow: hidden #

如果顶部模块为固定/粘性定位，直接给它设置overflow: hidden即可切断下层元素溢出到它区域内的阴影，改一行代码即可生效。
示例代码：

.top-fixed-module {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hidden; /* 新增这行 */
}

2. 给内容容器套父级并设置overflow: hidden #

如果顶部模块不能修改样式，就给带阴影的主体内容套一个和内容宽度一致的父容器，父容器设置overflow: hidden，同时给父容器加足够的内边距保证正常显示的阴影能完整展示，只有滚动到被顶部遮挡的位置时，溢出父容器的阴影才会被切断。
示例代码：

.content-wrapper {
  overflow: hidden;
  padding-bottom: 10px; /* 数值和你的阴影模糊半径、扩展半径匹配即可 */
}
.main-content {
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

3. 改用filter: drop-shadow替代box-shadow #

如果上面两种方案都不适用，可以把box-shadow换成filter: drop-shadow，它的阴影基于元素可见像素生成，元素本身被遮挡的部分对应的阴影也不会显示。注意该属性参数和box-shadow有细微区别，不支持内阴影inset。
示例代码：

.main-content {
  /* 替换掉原来的box-shadow */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
}

4. 用z-index层级控制阴影堆叠 #

如果顶部模块为不透明实色背景，直接给顶部模块设置比内容更高的z-index即可盖住溢出的阴影，逻辑最简单。
示例代码：

.top-fixed-module {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff; /* 确保为不透明背景 */
  z-index: 100; /* 数值只要比内容的z-index高即可 */
}
.main-content {
  position: relative;
  z-index: 1;
}

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