drop-shadow生成的阴影能否仅投射到指定元素上？

AI 小北

2026-9-30

解决方案

优先保留drop-shadow滤镜的前提下，可以通过「阴影层分离+遮罩裁剪」的方案实现仅投射阴影到指定对象，完美支持非矩形形状，也能满足多级别深度效果的需求：

核心实现逻辑

拆分上层元素的本体和阴影：将需要生成阴影的元素复制出一个仅承载阴影的独立层，设置该层本身的填充/描边为完全透明，仅保留drop-shadow滤镜效果
用目标接收元素做遮罩：给阴影层添加mask属性，遮罩源直接使用接收阴影的目标元素的形状（支持SVG路径、PNG透明图、HTML元素渲染结果等），阴影只会在遮罩的不透明区域显示，其余区域的阴影会被完全裁剪掉
层级控制：按「接收阴影的目标元素→阴影层→上层元素本体」的顺序设置z-index，确保层级顺序正确，阴影不会覆盖上层元素本体

CSS实现示例代码

/* 接收阴影的目标元素 */
.target-box {
  position: relative;
  z-index: 1;
}

/* 生成阴影的上层元素本体 */
.top-item {
  position: relative;
  z-index: 3;
  /* 本体不需要加阴影，阴影交给独立层处理 */
}

/* 独立阴影承载层，尺寸、形状和上层元素完全一致 */
.top-item-shadow {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* 隐藏本体，仅保留阴影 */
  background: transparent;
  border: none;
  filter: drop-shadow(12px 12px 6px rgba(0, 0, 0, 0.35));
  /* 用目标元素做遮罩，仅在目标区域显示阴影 */
  mask: var(--target-element-shape);
  -webkit-mask: var(--target-element-shape);
}