IE11 完全不支持 filter: drop-shadow()，因其 CSS 渲染引擎未实现 filter 属性；必须用 box-shadow 降级，但需注意其包围矩形盒而非贴合图形轮廓，且需手动控制优先级或 JS 注入来确保兼容。
IE11 完全不支持 filter: drop-shadow()
这不是兼容性“差”的问题，而是根本没实现——IE11 的 CSS 渲染引擎压根不认识 filter 属性（包括 drop-shadow、blur 等所有滤镜），连解析都不会做。你写上这行 CSS，IE11 会直接跳过整条声明，不报错、不警告、也不 fallback。
box-shadow 是唯一可行的降级方案
必须用 box-shadow 替代，但要注意它和 drop-shadow 的行为差异：
- 对透明 PNG 或 SVG 图标，
box-shadow会框住整个矩形盒（含透明区域），而drop-shadow贴合图形轮廓 —— 这是视觉上最明显的区别 -
box-shadow支持inset和spread-radius，drop-shadow不支持；但 IE11 下你本来也用不了这些 - 参数顺序一致：
box-shadow:，可直接复用数值
示例降级写法：
img.logo {
/* IE11 及更老浏览器只认这一行 */
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
/* 现代浏览器覆盖上 drop-shadow，贴合 logo 实际形状 */
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
别指望自动 fallback，得手动控制加载逻辑
CSS 本身没有“if IE”机制，@supports 在 IE11 中也不可用（它不支持该 at-rule）。所以不能靠条件判断，只能靠明确的优先级或 JS 注入：
- 把
box-shadow写在filter前面，利用层叠规则让 IE11 读到就停，现代浏览器继续解析后面的filter - 如果项目已用 Modernizr 或类似检测库，可用 JS 动态加 class：
document.documentElement.classList.add('no-filter')，再写.no-filter img.logo { box-shadow: ... } - 避免用
@media all and (-ms-high-contrast: none)这类 hack，它在 IE11 后期版本中已不稳定
SVG 内部
有人试图在 SVG 标签里写内联 box-shadow，或改用 PNG 预渲染阴影（失去响应式灵活性）。
真正容易被忽略的是：哪怕你只在某个按钮上用了 drop-shadow，IE11 用户看到的就是一个没阴影的扁平元素——没有中间态，也没有渐进增强。设计阶段就得接受这个断点，而不是寄希望于某条 CSS 规则能“智能适配”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
