filter: blur() 是首选高斯模糊方案，需配合 will-change 或 transform 优化性能，text-shadow 仅作兼容降级；两者不可叠加，模糊值应依语义场景精准设定。
直接用 filter: blur() 最省事，但老浏览器不认；text-shadow 兼容性好，可微调但本质是“假模糊”，别指望它替代高斯模糊。
filter: blur() 是首选，但要注意触发条件和性能代价
现代项目里，filter: blur(2px) 就是开箱即用的方案。它真正在像素层做高斯模糊，效果干净、边缘自然。
- 必须加
will-change: filter或transform: translateZ(0)，否则某些浏览器（尤其是 Safari 16.6 之前）会跳帧或卡顿 - 模糊值超过
3px后，GPU 内存占用明显上升，iOS Safari 上容易掉到 40fps 以下 - 不能只对文字本身设
blur()—— 它会影响整个元素盒模型，如果父容器有背景、边框或子元素，全都会糊 - 想只模糊文字内容？得套一层
<span></span>，再给它单独设filter，且确保该span没有 padding/margin 干扰布局
text-shadow 模拟模糊：靠多层透明阴影堆出来
text-shadow 不是模糊函数，是阴影函数。所谓“模糊效果”，是靠多个零偏移、不同半径、半透明的阴影叠加出来的视觉错觉。
- 基础写法：
text-shadow: 0 0 1px rgba(0,0,0,0.3), 0 0 2px rgba(0,0,0,0.2), 0 0 3px rgba(0,0,0,0.1);—— 半径递增 + 透明度递减，才接近真实模糊衰减曲线 - 千万别写
color: black; text-shadow: 0 0 5px black;，这样文字和阴影重叠，看起来是“发虚”而非“模糊” - 要真正弱化文字，得先设
color: transparent，再靠阴影“画”出文字轮廓 - IE10+ 支持，但 IE11 对多层
text-shadow渲染有 bug：第三层开始可能被截断，建议最多用两层
filter 和 text-shadow 组合用，不是叠加效果，而是兜底策略
这不是炫技，是实用兜底：用 filter 主力实现，再用 text-shadow 在不支持 filter 的环境里提供近似降级。
- 写法上，
text-shadow必须写在filter前面，否则被覆盖（CSS 层叠顺序） - 不要同时启用两者来“加强模糊”——
filter已经模糊了整个渲染层，再叠阴影只会让边缘更脏、颜色更浑浊 - 移动端低端 Android WebView（如 UC 13.x）识别
filter但不触发 GPU 加速，此时text-shadow反而更稳 - 检查是否生效？打开 DevTools → Elements 面板，删掉
filter行，看文字是否立刻变清晰；再删text-shadow，看是否只剩一团色块
模糊值调多少才合适，取决于你到底想干什么
没有通用“最佳值”。blur(1px) 和 blur(3px) 的语义完全不同：
- 做加载态占位文字？
blur(0.8px)足够，人眼几乎看不出糊，但机器可读性不受损 - 背景水印文字？
blur(2px)+opacity: 0.2更安全，单靠模糊容易在浅色背景上反显 - 悬停弱化次要按钮文字？用
transition: filter 0.15s，从blur(0)到blur(1.2px)，太快或太慢都失去反馈感 - 千万别在正文段落里用任何模糊——哪怕
blur(0.3px)，WCAG 对比度检测工具也会报 fail
最常被忽略的一点：模糊不是视觉装饰开关，它是信息权重调节器。调错一个像素，用户就可能错过关键操作入口。动手前，先问自己——这行字，此刻该被看见，还是该被藏起来？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
