box-shadow加不上首要排查overflow: hidden，它会裁剪阴影；其次检查fixed定位、z-index层级、transform触发的渲染问题及移动端适配参数。
box-shadow加不上？先查 overflow: hidden
常见现象是写了 box-shadow: 0 2px 8px rgba(0,0,0,0.1) 却完全看不到阴影。根本不是语法错，而是导航栏容器（比如 .bottom-nav 或其父级 .container）被设了 overflow: hidden，把画在元素外的阴影直接裁掉了。
实操建议：
- 用浏览器开发者工具检查
.bottom-nav计算后的overflow值：若为hidden或auto，必须覆盖为overflow: visible !important - 别只给子元素（如
.nav-item）加阴影——它没高度、没定位，阴影压根不渲染 - 如果用了
position: fixed，确保box-shadow直接加在固定定位的容器上，否则滚动时阴影会“漂移”
移动端阴影参数怎么配才不突兀
写死像素值（如 2px 4px）在不同设备缩放或横竖屏切换时容易跳变：小屏下导航栏高度压缩，阴影却还按原尺寸画，看起来像悬空或贴得太紧。
实操建议：
- 用
rem或em控制偏移和模糊半径，例如：box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.08)，随根字体缩放自然适配 -
rgba()的 alpha 值别贪大：浅色背景用0.06–0.08，深色背景改用rgba(255,255,255,0.05)，iOS Safari 对透明度渲染偏保守，0.05容易发虚 - 避免用
filter: drop-shadow()—— 边缘锯齿明显，且在低端安卓机上掉帧
和 fixed-bottom 冲突？z-index 和 transform 都得调
底部导航栏设为 position: fixed; bottom: 0; 后，阴影有时会被上层内容（比如弹窗、键盘、iOS 输入框）盖住，或者展开动画期间闪烁。
实操建议：
- 显式设置
z-index: 1000（比常见弹窗高），但别盲目堆高，优先保证层级逻辑清晰 - 在
.bottom-nav上加transform: translateZ(0)强制硬件加速，让阴影跟随渲染节奏，减少 iOS Safari 动画卡顿 - 如果用 JS 控制显示/隐藏（如点击后展开菜单），确保阴影 class 始终挂载在
.bottom-nav根元素上，而不是动态增删的子容器里
uni-app 或小程序里阴影失效？nvue 和 webview 渲染路径不同
uni-app 的 nvue 页面底层走原生渲染，box-shadow 不被支持；而 webview 模式下又可能受 WebView 内核限制（尤其旧版 Android）。
实操建议：
- nvue 下直接关阴影：文档明确提示“某些机型可能显示不正常”，别硬扛
- webview 下可用
shadow属性（如<uni-nav-bar shadow></uni-nav-bar>），它由 uni-app 内部转译为兼容方案 - 自定义组件中若需阴影，改用伪元素 + 渐变背景模拟：
::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.06)); }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
