底部固定条的 border-top 不显示，根本原因是 fixed 元素脱离文档流后，border-top 被父容器 padding-bottom、子元素 margin-top 或 box-sizing content-box 导致的高度溢出所遮挡；必须设 box-sizing: border-box 并清除 margin-top 才能稳定显示。
直接用 border-top 就行，但必须注意父容器的 box-sizing 和子元素的 margin 干扰
为什么底部固定条加 border-top 后边框不显示？
常见现象是：明明写了 border-top: 1px solid #ccc;，刷新后顶部边框完全看不见。根本原因不是 CSS 写错了，而是固定定位元素默认脱离文档流，border-top 实际画在了“自身顶部”，而这个位置往往被父容器的 padding-bottom 或子元素的 margin-top 吃掉，或者被其他层遮盖。
- 检查父容器是否设置了
padding-bottom—— 它会把整个悬浮条往下推，border-top被推到视口外 - 确认悬浮条本身没有
margin-top（哪怕 1px）—— 会把边框挤出可视区 - 如果用了
box-sizing: border-box，border-top会向内缩进，不影响整体高度；但若用默认content-box，它会额外增加 1px 高度，可能触发布局重排或被截断
position: fixed 底部条的 border-top 正确写法
关键不是“能不能加”，而是“加在哪、怎么加才稳定”。底部固定条通常这样声明：
footer-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
box-sizing: border-box; /* 必须加，否则 border-top 会让高度变 61px */
border-top: 1px solid #e0e0e0; /* 这才是顶部边框，不是上边距 */
}
-
box-sizing: border-box是前提，否则border-top会突破你设定的height - 不要用
margin-top模拟边框，那不是边框，是空白间隙，响应式下容易错位 - 如果需要和上面内容（比如主区域）视觉隔离，优先靠
border-top，而不是给主区域加padding-bottom—— 后者在滚动锚点跳转时容易导致定位偏差
和 position: sticky 底部条混用时的坑
虽然 sticky 更语义化，但它对底部固定场景支持极差：position: sticky; bottom: 0 在绝大多数浏览器里根本无效。所以实际项目中，**底部固定悬浮条几乎只能用 fixed**。这时候加 border-top 就不存在“吸顶/吸底切换”带来的样式冲突问题，但要注意：
- 移动端 Safari 对
fixed元素的border渲染有时有 1px 模糊，可改用transform: translateZ(0)强制硬件加速 - 如果底部条里有按钮或输入框，
border-top的颜色要避开系统键盘弹出时的遮挡色（比如 iOS 键盘上方常有一段浅灰过渡区） - 别用
outline代替border-top—— outline 不支持单边，且焦点状态下会叠加显示，造成双线
真正容易被忽略的是：边框颜色得和页面底部背景严格对齐。比如主内容区结束于白色背景，而底部条是浅灰，这时 border-top 如果用深灰，就会在明暗交界处形成一条突兀的“缝”，不是线条，是割裂感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
