legend必须是fieldset的第一个直接子元素，否则边框“挖空”失效；不能嵌套在其他标签内、不能有额外空格或换行；需用margin-block-start微调位置，禁用border-radius和text-align，居中/右对齐须用display:block配合margin，加图标或背景色时需处理white-space和overflow。
legend 必须是 fieldset 的第一个直接子元素
否则边框“挖空”失效，标题浮在框外或被裁剪。浏览器不会报错，但视觉上像没生效——这是最常被忽略的结构性前提。
-
legend不能包在<div>、<span>或其他容器里 - 不能放在
fieldset中间或末尾，哪怕只多一个换行符或空格，某些 Safari 版本也会退化为普通 inline 元素 - 别用伪元素（如
::before）模拟legend——它不触发原生边框裁剪，屏幕阅读器也读不到语义
用 margin-block-start 微调 legend 垂直位置
margin-top 不可靠，因为 legend 在 UA 样式里有隐藏的 display: table 行为，直接设 margin-top 会触发意外重排。Chrome 和 Firefox 对同一值的响应可能完全不同。
- 统一用
margin-block-start: -0.3em（推荐范围：-0.25em ～ -0.5em），值取决于字体大小和fieldset的border-width - 粗边框（>2px）会让
legend默认上移更多，此时需加大负值补偿 - 禁用
border-radius——它和 legend 挖空机制冲突，旧版 Safari 可能直接丢弃挖空效果
居中/右对齐 legend 别碰 text-align
text-align: center 只对齐文字本身，不移动整个 legend 的锚点位置。结果是文字居中，但边框起始点仍在左上角，容易和下方控件重叠。
- 居中写法：
legend { display: block; margin: 0 auto; }，不要设width或max-width（Firefox 下会换行错位） - 右对齐写法：
legend { display: block; margin-left: auto; } - 绝对避免
float: right或position: absolute——前者破坏语义流，后者让屏幕阅读器无法关联标题与控件组
加图标或背景色时必须补 white-space 和 overflow
用 ::before 插入图标或给 legend 加 background-color 后，文字可能撑宽、换行异常，或边框残影透出。
立即学习“前端免费学习笔记（深入）”；
- 图标定位：用
left: -10px+top: 50%+transform: translateY(-50%)，数值按图标宽度和边框厚度微调 - 背景色遮边：必须加
padding: 0 8px，否则文字贴边难读；同时设white-space: nowrap防止小屏下换行错位 - fieldset 有圆角？同步加
overflow: hidden，否则legend会溢出圆角外
display: contents，都可能让屏幕阅读器跳过整个分组。 
