hover 时用 filter: blur() 必须配合 transition 才能平滑过渡，且 blur(0) 必须带单位（如 0px），同时图片需包裹在有明确尺寸和 overflow: hidden 的容器内，并注意 ie 和旧版 safari 的兼容性问题。
hover 时用 filter:blur() 变模糊，必须加 transition
不加过渡动画，图片会瞬间模糊或立刻复原，体验生硬。CSS 的 filter 属性本身不自动触发过渡，必须显式声明 transition 才能平滑变化。
-
transition要写在默认状态（非 hover）的规则里，不是 hover 里 - 推荐只过渡
filter，避免连带transform或opacity一起动，否则可能触发多余重绘 - 常用写法：
transition: filter 0.3s ease;，ease比linear更自然
blur 值为 0 时不能省略单位
filter: blur(0) 是无效语法，浏览器会直接忽略整条规则。必须写成 filter: blur(0px) 或 filter: blur(0rem) 等带单位的形式，否则 hover 进去没反应，debug 时容易卡住。
- 常见错误：
filter: blur(0);→ 不生效 - 正确写法：
filter: blur(0px);（推荐 px，兼容性最稳） - hover 状态可设为
filter: blur(4px);，数值越大越糊，一般 2–6px 视觉较合适
图片父容器需有明确尺寸，否则 blur 可能溢出或错位
filter: blur() 本质是渲染时对像素做卷积运算，会向外扩展模糊半径。如果图片没有包裹容器、或容器 overflow: hidden 缺失，模糊边缘可能撑开布局或显示锯齿。
- 给图片外层加一个
<div>，设 <code>width/height和overflow: hidden - 图片本身设
display: block，避免底部多出空白间隙 - 不要依赖
img标签自带的宽高属性控制尺寸，优先用 CSS 控制 - 可用
@supports (filter: blur(1px)) { ... }做特性检测 - 降级方案：hover 时用
opacity: 0.9或轻微transform: scale(0.99)替代 - 真要强兼容，就别用 blur —— 这个效果本质上就是现代浏览器的“锦上添花”
IE 和旧版 Safari 不支持 filter，需确认目标环境
filter 在 IE 完全不支持；iOS Safari 直到 9.0+ 才支持 blur()，且早期版本对 transition + filter 组合有性能抖动。实际项目中若需兼容 iOS 8 或微信内置浏览器（X5 内核），得降级处理。
blur 的过渡效果看着简单，但单位、容器、兼容性三处漏一点，就看不到模糊。动手前先检查这三项，比反复调 transition 时间更省时间。
