为什么drop-shadow滤镜在input元素上生效，在div元素上却不生效？

先看你给出的代码对比：

带阴影的input代码 #

.test {
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  border: 1px solid black;
  height: 20px;
}

<input class="test" />

无阴影的div代码 #

.test {
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  border: 1px solid black;
  height: 20px;
}

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

核心原因 #

drop-shadow滤镜是跟着元素的可见像素区域生成阴影的，只会给元素的不透明内容（背景、文本、边框等）添加阴影：

• input是表单控件，浏览器默认会给它设置不透明背景（比如background-color: white），所以整个20px高的矩形区域都是可见的，drop-shadow能基于这个完整矩形生成明显的阴影。
• div默认背景是透明的，只有1px的黑色边框是可见像素，drop-shadow只会给这圈细边框生成阴影，再加上你设置的阴影是低透明度的柔和样式，这个细边框的阴影几乎肉眼不可见，看起来就像没有阴影。

验证方法 #

给div加上背景色就能看到阴影了，比如：

.test {
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  border: 1px solid black;
  height: 20px;
  background-color: white; /* 新增背景色 */
}

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