给或加box-shadow没效果，主因是浮动导致父容器高度塌陷、无真实渲染区域，或父容器overflow:hidden裁剪阴影；应使用overflow:hidden或display:flex清除浮动，并将阴影加在容器而非单个链接上。
给 <nav></nav> 或 <ul></ul> 加 box-shadow 为什么没效果？
常见原因是父容器或导航项本身没有「脱离文档流」或「有明确高度/背景」，导致阴影被裁切或不可见。比如 <nav></nav> 默认是块级但内部 <li> 浮动后，<nav></nav> 高度塌陷，box-shadow 就悬在空处。
实操建议：
- 确保导航容器有显式高度或使用
overflow: hidden/display: flex清除浮动 - 阴影加在容器上（如
<nav></nav>或包裹<ul></ul>的<div>），而非单个 <code><a></a> - 避免给
position: absolute的子元素加阴影后还期望它影响父布局——阴影不占空间 - 轻量悬浮：
0 2px 6px 1px rgba(0,0,0,0.08) - 中等立体：
0 4px 12px 2px rgba(0,0,0,0.12) - 强调层级（如固定顶栏）：
0 6px 16px 2px rgba(0,0,0,0.16) -
filter会触发新层叠上下文，可能遮挡下拉菜单（z-index失效） - 性能略差，尤其在滚动频繁的页面中，慎用于整个
<nav></nav> - IE 完全不支持，若需兼容，只能回退到
box-shadow - 检查所有断点下的
box-shadow是否被重置为none（比如 CSS 重置库或框架默认样式） - 用
devtools查看 computed 样式，确认阴影值是否生效且未被transform或clip-path干扰 - 如果用了
transform: translateY()做下拉动画，阴影不会随位移移动——得把box-shadow加在动画元素本身，而非父容器
box-shadow 参数怎么调才像「悬浮」而不是「脏边框」？
关键在 blur-radius 和 spread-radius 的配合。纯外阴影（0 2px 8px rgba(0,0,0,0.15)）容易发虚；加一点正向 spread（如 0 2px 6px 1px）能让阴影更紧凑、更有厚度感。
推荐组合（适配横向导航常用尺寸）：
立即学习“前端免费学习笔记（深入）”；
注意：不要用 inset，那会往里凹，不是「浮起来」的效果。
用 filter: drop-shadow() 替代 box-shadow 有什么区别？
drop-shadow() 是滤镜，作用于元素的「形状轮廓」，能跟随圆角、透明区域投射阴影；而 box-shadow 只按矩形盒模型投射。对带 border-radius 或图标混合的导航项更自然。
但要注意：
示例写法：filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
响应式导航里阴影突然消失或错位怎么办？
本质是媒体查询中遗漏了阴影相关声明，或 flex 布局换行后容器高度变化导致阴影被截断。特别是移动端折叠菜单展开时，常因 max-height 动画 + overflow: hidden 把阴影直接剪掉。
排查重点：
真正难的不是加阴影，而是让阴影在各种布局模式、缩放比例、深色模式切换下都保持稳定。别只盯着 box-shadow 值，先盯住容器的渲染上下文和层叠顺序。
