uni-app 中无法在自定义 tabBar 中使用 backdrop-filter 实现真背景模糊，因 iOS/Android 原生 WebView 及小程序环境普遍不支持该属性，H5 端虽支持但真机小程序完全失效，强行使用会导致白屏或静默失败。
直接说结论：uni-app 里没法用 CSS backdrop-filter: blur() 实现真·背景模糊的自定义底部导航菜单，iOS 和 Android 原生 WebView 不支持该属性，H5 端虽支持但真机小程序环境（微信/支付宝/快应用等）完全不生效，强行写只会白屏或静默失败。
为什么 backdrop-filter 在 uni-app 自定义 tabBar 里基本不可用
uni-app 的自定义 tabBar 渲染在原生层之上（WebView 层），而 backdrop-filter 依赖浏览器对「背后内容」的合成能力。但在小程序环境中：
- 微信小程序 WebView 是独立渲染容器，
position: fixed的 tabBar 容器无法「看到」它下方的页面滚动内容，也就没有「背后可模糊」的对象 - Android 各厂商 WebView（尤其低版本）普遍禁用或阉割
backdrop-filter，即使加了-webkit-backdrop-filter也无响应 - HBuilderX 调试时可能显示模糊效果，但真机运行（尤其是 iOS 微信）必然 fallback 为透明或纯色背景
替代方案：用半透明白色/浅灰遮罩模拟“类模糊”视觉效果
这是目前最稳定、跨平台兼容的做法，视觉上接近模糊感，且不会引发渲染异常：
- 给自定义 tabBar 容器设置
background: rgba(255, 255, 255, 0.8)或background: rgba(250, 250, 250, 0.85)，配合border-top: 1px solid rgba(0,0,0,0.05)提升层次感 - 避免用纯黑/深色底 + 高透明度，否则文字对比度不足，iOS 审核可能被拒（可读性问题）
- 鸿蒙端需额外加
backdrop-filter: blur(10px)（仅鸿蒙 WebView 支持），但必须包裹在@supports (backdrop-filter: blur(1px))查询内，否则影响其他平台 - 安卓低端机若发现遮罩发灰、文字发虚，可降为
rgba(255,255,255,0.9)并关闭所有阴影
凸起按钮区域不能参与“模糊模拟”，必须单独处理
中间凸起按钮（如加号）如果也套用半透明背景，会和页面内容混在一起，失去悬浮感，且点击热区易误触：
- 凸起按钮容器必须设
background: #fff或品牌主色，不透明 - 按钮本身用
box-shadow: 0 4px 12px rgba(0,0,0,0.1)模拟轻微浮层光感，别依赖背景透明度来“托”它 - 绝对定位时，确保
z-index: 100且父容器z-index不高于它，否则按钮会被遮挡 - 安全区适配仍要用
padding-bottom: env(safe-area-inset-bottom)，鸿蒙 fallback 到34px，别让按钮被刘海吃掉
动态切换背景风格时，别用 class 切换 backdrop-filter
有人试图通过 v-if 切换带 blur 和不带 blur 的两个 tabBar 组件，这会导致：
- 页面重绘卡顿，尤其在 tab 切换频繁时
- 凸起按钮定位偏移（因容器高度变化未同步）
- 状态管理混乱（Pinia / Vuex 中的 activeTab 与 DOM 渲染不同步）
正确做法是只维护一套 DOM 结构，用 :style 动态绑定 background 和 box-shadow，例如：:style="{ background: isDarkMode ? 'rgba(30,30,30,0.85)' : 'rgba(255,255,255,0.8)' }"。
真正难的不是写样式，而是接受「小程序里没有真正的 backdrop-filter」这个事实——所有看起来像模糊的效果，都是精心调出来的遮罩+光影+留白组合技。别在真机上赌兼容性，先跑通 iOS 微信，再补安卓，最后看鸿蒙是否愿意给你那 10px 模糊。
