img:hover { filter: blur(0) } 在手机上常失效，因 <img> 是替换元素，iOS Safari 默认不派发 :hover 事件（仅首次点击后可能触发），且部分安卓 WebView 完全忽略；未设 display: block 会导致底部留白、hover 区域错位；未加 will-change: filter 易在 Retina 屏糊成一片。
直接用 filter: blur() + transition 就能实现，但必须写对位置、加对过渡、避开替换元素陷阱——否则在 iOS Safari 上 hover 不触发，或模糊卡顿掉帧。
为什么 img:hover { filter: blur(0) } 在手机上经常失效
因为 <img> 是替换元素，iOS Safari 默认不给它派发 :hover 事件（首次点击后才可能触发），且部分安卓 WebView 完全忽略。更关键的是：没设 display: block 会导致底部留白，hover 区域错位；没加 will-change: filter 容易在 Retina 屏上糊成一片。
- 把
<img>包进一个<div class="img-hover">容器里，:hover写在容器上 -
img必须设display: block消除行内默认空白 - 过渡声明必须写在常态规则里：
.img-hover img { transition: filter 0.25s ease; }，不能只写在:hover里 - 加
will-change: filter强制走合成层（尤其对大图）
filter: blur() 的值怎么选才不卡、不变形
模糊值不是越大越好。blur(10px) 在低端机上容易掉帧，blur(0) 和 blur(none) 效果一样但后者无法动画——CSS 动画只认可计算值，none 会被当作初始状态重置整个 filter 链（比如同时有 grayscale() 也会被清掉）。
- 常用安全范围是
blur(2px)到blur(8px)，优先从4px起调 - 想“模糊→清晰”，默认设
filter: blur(6px)，hover 时设filter: blur(0) - 别混用
filter: none，它会丢掉所有其他 filter 效果（如brightness()） - 如果同时要灰度+模糊，写成
filter: blur(6px) grayscale(1)，hover 时统一归零
如何让模糊过渡更顺，且兼容老浏览器
现代浏览器支持 filter 过渡，但 IE 完全不支持，Firefox 早于 35 版也不支持动画。不过只要不依赖 IE，只需补一行 -webkit-filter 前缀就能覆盖 Safari 9+ 和旧 Chrome。
立即学习“前端免费学习笔记（深入）”；
- CSS 中写两行：
filter: blur(6px); -webkit-filter: blur(6px); - transition 也补前缀：
transition: filter 0.25s ease; -webkit-transition: -webkit-filter 0.25s ease; - 真要兼容 IE？放弃 CSS filter，改用两张图切换（LQIP → 原图）+ opacity 动画，但那就不是“同一张图模糊变清晰”了
真正容易被忽略的点是：blur 值单位必须是 px，不能用 rem 或 %；且过渡时间别设太短（0.1s 人眼难感知），也别太长（0.5s+ 显得迟滞）。动手前先确认图片尺寸是否合理——超大图配高 blur 值，GPU 解码压力会直线上升。
