最直接方法是给自身添加border-bottom: 1px solid #eee;，注意避免父容器overflow: hidden截断、媒体查询覆盖及暗色模式下颜色失效问题。
用 border-bottom 给
绝大多数情况，页脚顶部那条细线其实是加在 元素自身上，而不是它上面的容器。直接写 border-bottom: 1px solid #ccc; 就能出效果，不需要额外包裹或定位。
常见错误是误以为要给 或 加 border-bottom，结果线出现在错位置，或者被其他元素遮盖。
-
1px是视觉上最接近“细线”的宽度，0.5px在高倍屏（如 Retina）下才真正细，但多数浏览器不支持非整数像素边框渲染 - 颜色建议用浅灰（如
#eee或#f0f0f0），比纯黑/纯白更柔和，也避免与背景色撞车 - 如果页脚有内边距（
padding），边框默认在内边距外侧，不影响内容排版；若需边框紧贴文字底部，可改用box-sizing: border-box;
避免边框被父容器 overflow: hidden 切掉
有些布局中， 检查方式：打开浏览器开发者工具，选中 立即学习“前端免费学习笔记（深入）”； 很多项目在 这不是 HTML5 特性问题，而是 CSS 层叠顺序没理清。细线失效往往不是没写，而是被后面更具体的规则干掉了。 有人在 除非页脚内容本身需要语义分隔（比如版权信息和友情链接之间），否则别用 真正容易被忽略的是：细线颜色要随主题模式动态切换。如果用了 的父元素（比如一个 overflow: hidden，而页脚本身用了负 margin 或绝对定位——这时 border-bottom 可能被截断，线上不显示。，看 computed 样式里 border-bottom 是否生效，再往上逐级看父元素的 overflow 和 height 设置。
outline: 1px solid red; 对比，outline 不受 overflow 影响overflow: hidden，或改用 overflow: clip;（较新，兼容性注意）overflow: hidden，就把边框换成伪元素：footer::after {
content: '';
display: block;
height: 1px;
background: #eee;
margin-top: 1rem;
}响应式下细线变粗或消失？检查媒体查询覆盖
@media (max-width: 768px) 里重置了全局边框样式，比如 * { border: 0; } 或重置了所有 footer 的 border，导致移动端细线没了。
border-bottom
footer { border-bottom: 1px solid #eee !important; }（仅调试用，上线前应理清选择器权重）@media (max-width: 768px) {
footer {
border-bottom: 1px solid #f5f5f5;
}
}用
hr 替代边框？不推荐用于页脚分隔 外部加一个
margin 和 height，不如直接操作 border-bottom 稳定align-items 或 justify-content 错位，出现细线偏左、居中或悬浮等异常prefers-color-scheme: dark，但边框色写死成 #ccc，暗色模式下就看不见了。务必用 color-scheme 感知或 CSS 变量统一管理。
