legend无法真正让横线“穿过”文字，浏览器默认的嵌入效果实为边框挖空或文字遮盖；可靠方案是禁用挖空机制，改用fieldset上边框+legend负margin向上微调，使文字覆盖边框形成视觉穿透效果。
legend怎么让横线“穿过”文字而不是断开
浏览器默认的 legend 嵌入边框效果，本质是“挖空” fieldset 上边框，让文字覆盖其上——不是真有横线穿过，而是边框被视觉遮盖或透明裁切。想稳定实现“横线穿过标题”的效果，不能依赖默认行为，得手动控制边框与文字关系。
- 别用
border-radius：fieldset 加圆角会直接破坏挖空逻辑，Chrome/Safari 下横线消失或错位 - 边框宽度建议 ≤ 1px：2px 及以上时，不同浏览器对“挖空起始点”的计算差异变大，Firefox 可能只裁一半，Edge 显示残影
- 文字背景必须透明：如果给
legend设了background: white，又没加padding，文字会紧贴边框，看起来像“压着线”，实际是遮盖不全 - 禁用
outline和额外border：这些会叠加在原生边框上，造成双线、偏移或裁切失败
用 CSS 模拟“横线穿过”的可靠写法
最稳的方式是放弃依赖 UA 的挖空机制，改用 fieldset 的上边框 + legend 的负 margin 向上微调，让文字“骑”在线上：
fieldset {
border-top: 1px solid #ccc;
border-left: none;
border-right: none;
border-bottom: none;
padding-top: 0.75rem; /* 留出文字上方空间 */
}
legend {
display: block;
margin-top: -0.5rem; /* 把文字往上拉，盖住边框 */
padding: 0 0.5rem; /* 左右留白，避免文字贴边 */
background: transparent; /* 必须透明，否则遮不住边框 */
line-height: 1;
}- 不用
margin-block-start：它在旧版 Safari 中支持差，margin-top兼容性更广 - 避免
width: 100%：会导致 Firefox 下换行异常，文字撑满后挤掉边框视觉连续性 - 响应式字号用
clamp(1rem, 4vw, 1.125rem)：固定 px 在小屏易溢出，破坏“穿线”对齐
为什么 text-align: center 不管用
legend 默认是 inline 元素，text-align: center 只居中文本内容，不移动它在边框上的锚点位置。结果就是文字居中了，但“横线”还在左上角断开——你看到的是文字飘在框外，不是线穿过字。
- 正确居中：先
display: block，再margin: 0 auto - 右对齐可用
margin-left: auto，但前提是 DOM 顺序不变、无空格/换行节点 - 任何
position: absolute都会切断可访问性链路：屏幕阅读器无法关联该标题与字段组
禁用状态下的横线怎么保持可见
fieldset[disabled] 不影响边框渲染，但若你用了 opacity: 0.7，整个边框和文字都会变淡，横线可能看不清；若只灰化文字，边框又太突兀。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：
fieldset[disabled] { box-shadow: inset 0 0 0 1px #aaa; }，保留清晰横线 - 同时显式重置文字颜色：
fieldset[disabled] legend { color: #777; } - 绝对不要用
fieldset[disabled] { border-color: #ddd; }：禁用态下边框应弱化，而非强调 -
input[type="hidden"]仍会提交，这点和横线无关但常被连带忽略
真正难的不是让线“看起来穿过”，而是确保每次加新字段、抽成组件、或者换 UI 库时，legend 仍是 fieldset 的第一个子元素——少一个空格、多一个注释，整组的语义和可访问性就断了。
