加 box-shadow 无阴影的主因是父容器 overflow: hidden 裁剪或元素非块级/锚点异常；“沉底”推荐 box-shadow: 0 4px 8px -1px rgba(0,0,0,0.12)；移动端用 focus-within 替代 hover。
直接给固定定位的悬浮条加 box-shadow 即可，但必须确保它不被父容器裁掉、且自身是块级元素——否则阴影根本不会渲染。
为什么固定定位的悬浮条加了 box-shadow 还是没阴影？
常见原因不是代码写错，而是两个硬性前提没满足：
-
position: fixed元素默认是块级，但若外层有overflow: hidden（比如全屏轮播容器、html或body被设了该属性），阴影会直接被裁剪 - 如果悬浮条是
<div> 但内部只放行内内容（如纯文字或未设宽高的 <code><img>），某些浏览器可能因盒模型计算异常导致阴影锚点偏移 - 检查是否误用了
inset：底部悬浮条需要的是外阴影，inset会往里画，方向完全反了 - 垂直偏移用正值（如
4px），数值建议 2–6px：太小无感，太大显得悬空 - 模糊半径控制在
6px–10px：超过12px容易向左右晕开，破坏“条状”印象 - 扩散半径设为
-1px或0：负值能收紧底部边缘，让阴影更“实”，避免毛边 - 颜色别用纯黑：
rgba(0,0,0,0.12)比rgba(0,0,0,0.3)更自然，尤其在深色背景或夜间模式下 - 别用媒体查询模拟 hover，直接换选择器：给悬浮条容器加
tabindex="0" - 用
.bar:focus-within替代.bar:hover，这样键盘 Tab 和手指点击都能触发阴影变化 - 如果悬浮条本身是
<a></a>或<button></button>，无需额外加tabindex，语义已支持聚焦 - 父容器（尤其是
body）若设了overflow: hidden，整个固定悬浮条连同阴影都会被裁掉——临时排查可加outline: 1px solid red看阴影是否落在 outline 外 - 阴影颜色用品牌主色的暗化变体（如
#3498db的 15% 透明度叠加），比通用灰更协调；纯黑在深色背景上会跳脱，甚至在 OLED 屏上发亮
box-shadow 参数怎么配才像“沉底”的悬浮条？
目标是视觉上紧贴页面底部、有轻微立体感，又不发虚或飘起来。关键不是加大模糊，而是控制扩散和偏移：
推荐组合：box-shadow: 0 4px 8px -1px rgba(0,0,0,0.12)
移动端点击没反应？focus-within 是更稳的 fallback
很多固定悬浮条是操作入口（如客服按钮、返回顶部），但 :hover 在触摸设备上基本不可靠，尤其 iOS Safari 对 fixed 元素的 hover 支持极弱。
容易被忽略的细节：阴影颜色和父容器 overflow
最常踩的坑不是参数调不准，而是两处“看不见”的配置：
复杂点在于：固定定位元素的堆叠上下文容易被意外覆盖，如果悬浮条被其他 z-index 更高的元素盖住，阴影也会失效——务必确认它的 z-index 明确高于同级兄弟容器。
