filter支持css过渡动画，但必须显式声明transition: filter 0.3s ease；若仅写transition: all或未定义初始filter值，动画将失效，且多滤镜叠加顺序影响渲染结果。
hover 时用 filter 切换图片效果，核心是 transition + filter 组合
直接上结论：filter 支持 CSS 过渡动画，但必须显式声明 transition，否则 hover 瞬间切换会显得生硬甚至“闪一下”。浏览器默认不给 filter 加过渡，这点容易被忽略。
常见错误现象：filter: brightness(1.2) contrast(1.1) 写在 :hover 里，鼠标移入立刻生效、无缓动；或者加了 transition: all .3s 却发现部分滤镜（如 drop-shadow()）在某些旧版 Safari 下不触发动画。
- 只对需要动的属性写过渡，推荐：
transition: filter .3s ease，避免all带来意外重绘 -
filter值必须在非 hover 和 hover 状态下都存在（哪怕初始为none），否则动画不会起始 - 慎用
blur()配合大尺寸图——Chrome 下可能触发合成层爆炸，滚动变卡
多滤镜叠加顺序影响最终效果，不能随意调换
filter 是按书写顺序从左到右执行的，contrast(1.3) brightness(0.9) 和 brightness(0.9) contrast(1.3) 渲染结果不同。图像库中常需“先提亮再锐化”或“先模糊再加阴影”，顺序错了就白配。
典型使用场景：缩略图悬停时增强细节（提升对比+轻微锐化），点击前预览高斯模糊背景图。
- 锐化没有原生函数，可用
unsharp-mask（非标准，仅 Safari 支持），更通用的是convolve-matrix（复杂且兼容差），实际项目中建议用contrast()+brightness()模拟 -
drop-shadow()要比box-shadow更贴合图像轮廓，但不能用在伪元素上（::before无法继承图片 alpha 通道） - 多个滤镜连写时，空格分隔，不要换行或逗号——
filter: brightness(1.1) saturate(1.2) drop-shadow(2px 2px 4px #000)
IE 和旧版 Safari 的兼容性断点必须手动降级
filter 在 IE 中只支持 progid:DXImageTransform.Microsoft 语法（已废弃），而 iOS hue-rotate()、invert() 动画支持不稳定。如果图像库要覆盖微信内置浏览器（常锁定旧版 WebKit），就得准备 fallback。
常见错误现象：hover 后图片变黑（invert(1) 在 Safari 12 下 bug）、滤镜完全不生效（IE11 直接忽略整条 filter 声明）。
- 用 @supports 检测：
@supports (filter: blur(1px)) { ... }，把高级效果包在里面 - 降级方案不是“去掉效果”，而是换更安全的替代：比如不用
sepia()，改用opacity: .95+background: #f5f5f5模拟暖调 - Webpack 或 Vite 构建时，别依赖 postcss-filter-plugins 等自动补全——它们对多值 filter 支持不全，容易把
grayscale(80%)错转成无效 IE 语法
图片加载完成前 hover 触发会导致滤镜错位或闪烁
原始图片还没解码完，CSS filter 就已应用，尤其在懒加载 + loading="lazy" 场景下，首屏外图片 hover 时可能先闪一下原始尺寸，再套滤镜。这不是代码写错，是渲染时机问题。
真实调试中容易误判为 CSS 优先级问题，其实根源在资源加载流水线。
- 给图片容器设固定宽高（
aspect-ratio或 padding-bottom hack），避免 layout shift 干扰 filter 动画帧 - 监听
img.onload后再添加可 hover 的 class，而不是一上来就允许交互 - 若用
background-image替代<img>，记得background-size: cover和filter共存时，filter 作用于整个盒模型，可能把容器边框也模糊掉
blur(2px)，Chrome 会强制把它提升为独立图层，内存占用翻倍——图像库批量展示时，这个成本是乘法关系，不是加法。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
