底部固定悬浮条需设bottom: 24px、border-radius为高度一半、双层box-shadow（如0 4px 12px rgba(0,0,0,0.12)和0 12px 32px rgba(0,0,0,0.08)），并配z-index: 1000与flex居中。
用 CSS 实现底部固定悬浮条的胶囊形状
底部固定悬浮条要呈现“悬空胶囊”效果，核心不是靠 position: fixed 单独撑起来，而是靠 box-shadow 模拟浮空感 + border-radius 控制胶囊弧度 + 合理的层级和留白。纯靠 height 和 border-radius 只能得到扁平胶囊，没有“悬空”感。
关键参数：border-radius 和 box-shadow 的配合
胶囊形状由宽高比和圆角决定；悬空感几乎全靠阴影。常见错误是只加 border-radius: 50px 却忽略阴影深度和模糊值，导致贴底、发虚或边缘生硬。
-
border-radius建议设为高度的一半（例如height: 60px→border-radius: 30px），确保左右完全圆润 -
box-shadow至少包含两个层：一层短距离偏移（如0 4px 12px rgba(0,0,0,0.12)）制造基础浮空，一层更柔的底层扩散（如0 12px 32px rgba(0,0,0,0.08)）增强立体感 - 避免用
inset阴影——它会让元素看起来“陷进去”，和悬空目标相反
HTML 结构与定位要点
必须用 position: fixed 固定在底部，但不能直接贴 bottom: 0，否则阴影会被裁掉。真实项目里常漏掉这个留白。
- 设置
bottom: 24px（而非0），给阴影留出渲染空间 - 容器需加
z-index: 1000，防止被其他 fixed 元素（如导航栏）遮挡 - 推荐用 flex 布局居中内容，避免
text-align: center对图标/按钮错位 - 若页面有滚动条，注意
right: 24px（非right: 0）可避免遮挡滚动条
移动端适配和性能提醒
胶囊条在 iOS Safari 下容易出现阴影锯齿或渲染卡顿，尤其叠加动画时。这不是 bug，是 WebKit 对 box-shadow + transform 的合成策略限制。
- 避免同时对胶囊条使用
transform: translateY()和复杂阴影——优先用top/bottom控制位置 - 在 iPhone 上测试时，打开「设置 → 辅助功能 → 显示与文字大小 → 降低透明度」，确认阴影是否仍清晰可见
- 如果胶囊内含图标或徽标，用
background-image或 inline SVG，别用字体图标（如 Font Awesome），后者在小尺寸下易糊边
真正难的不是画出胶囊，而是让阴影在不同设备上都稳定“浮起来”。多试两组 box-shadow 值，比调十次 border-radius 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
