backdrop-blur 仅在 Chrome 97+、Firefox 103+、Safari 15.4+ 原生支持，旧版 Safari 和微信 X5 内核完全不支持，需用 @supports 检测并真机验证。
backdrop-blur 在哪些浏览器里根本不起作用
Chrome 97+、Firefox 103+、Safari 15.4+ 才原生支持 backdrop-blur，旧版 Safari（尤其是 iOS 15.2 及更早）会直接忽略该类，不报错也不生效。用之前先查 Can I Use 上的 backdrop-filter 支持表，别靠“看起来像”判断是否生效。
- 开发时在 Safari 技术预览版或最新 iOS 模拟器里真机验证，别只信 Chrome DevTools 的渲染
- 如果目标用户含大量微信内置浏览器（X5 内核），
backdrop-blur基本等同于没写——它完全不支持backdrop-filter - 用
@supports (backdrop-filter: blur(1px))包裹 CSS 是稳妥做法，但 Tailwind 默认不生成带 @supports 的变体，得手动配backdropBlur插件或改tailwind.config.js
blur 值写成 backdrop-blur-sm 却没模糊感？
Tailwind 的 backdrop-blur 预设值是固定的：-sm 是 4px，-md 是 8px，-lg 是 12px，-xl 是 16px。4px 在高分屏（如 MacBook Pro 视网膜屏）上几乎看不出效果，人眼对小数值模糊极其不敏感。
- 直接写
backdrop-blur-[6px]（需启用 JIT 模式 + 自定义值）比依赖 -sm 更可靠 - blur 值不是越大越好：超过 20px 后性能明显下降，尤其在滚动区域，iOS 上容易触发重绘卡顿
- 别和
blur（作用于元素自身）混淆：backdrop-blur模糊的是“背后”的内容，不是当前元素，所以必须确保父容器有透明背景（如bg-black/20）且后面有可被模糊的内容层
用了 backdrop-blur 却看到白边或色块
这是最常被忽略的渲染细节：blur 效果需要“背后有东西可模糊”。如果 backdrop 元素后面是纯色背景（比如 bg-white），或者父容器裁剪了溢出（overflow: hidden），blur 就会采样到空白或边界色，产生难看的灰白边缘。
- 确保 backdrop 元素的父级有实际内容延伸到其边界外（比如加
py-4 px-6留白），否则 blur 无源可溯 - 避免在
fixed或absolute定位的弹窗上直接套backdrop-blur，除非你明确控制了它的 z-index 和背后层级结构 - 部分安卓 WebView 会把 blur 边缘渲染成半透明黑块，加
bg-black/5微调底色能缓解，但本质是引擎缺陷，无法根治
如何让 backdrop-blur 在深色模式下保持一致
Tailwind 的暗色模式默认只切换文字/背景色，backdrop-blur 本身不感知模式。但深色背景下，同样 blur 值可能显得过重或过轻，尤其搭配 bg-white/10 这类半透色时。
- 用
dark:backdrop-blur-md手动覆盖，而不是指望自动适配 - 别用
bg-opacity控制透明度——它已废弃；改用bg-black/20这类新语法，确保暗色模式下 alpha 值计算正确 - 如果背景是渐变或图片，blur 在深色模式下可能暴露噪点，此时建议降一级 blur 值（比如从 lg 改为 md），比硬调 opacity 更自然
模糊效果不是开关式功能，它高度依赖上下文渲染层级、设备像素比和底层图形管线。哪怕 class 写对了，漏掉一层 overflow-visible 或少一个 z-10，就全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
