直接重置 fieldset 边框和 legend 样式最省事：fieldset { border: none; padding: 0; margin: 0; }，legend { display: block; width: fit-content; margin: 0 auto; }，并注意浏览器对 legend 定位的隐式规则。
fieldset 默认样式太丑，怎么快速重置边框和图例？
直接去掉默认边框和图例样式最省事，但得小心 legend 的定位逻辑被破坏。浏览器对 fieldset 的渲染有隐式规则：legend 默认作为 fieldset 的“标题”嵌入上边框，不是普通子元素。
- 先写
fieldset { border: none; padding: 0; margin: 0; }清掉基础样式 -
legend必须单独处理，比如legend { width: auto; margin: 0; padding: 0; font-weight: bold; } - 如果想让
legend看起来像普通标题（比如左对齐、无偏移），得加position: static;，否则它可能仍受浏览器内置的“嵌入边框”行为影响 - 某些旧版 Safari 会忽略
legend的display变更，稳妥起见别设display: block以外的值
如何让 fieldset 内部表单控件对齐更干净？
默认情况下，fieldset 的 padding 和子元素的 margin 容易错位，尤其混用 input、select、textarea 时。
- 统一设置
fieldset > * { margin-bottom: 0.5rem; }，比依赖各控件自身 margin 更可控 - 避免在
fieldset上设line-height或font-size，这些会干扰legend的垂直居中计算 - 如果用了 CSS Grid 布局，
fieldset建议设display: contents;—— 但注意：这会让legend脱离语义结构，屏幕阅读器可能跳过，仅限视觉优化场景 - IE 不支持
display: contents，需要降级方案，比如用div模拟分组 + ARIA 属性补充语义
legend 文字换行后位置错乱，怎么修？
legend 默认是 inline 元素，文字一换行，浏览器就容易把它“挤”到左边或顶部，尤其在设置了 width 或 text-align 后。
- 强制
legend { display: block; width: fit-content; margin: 0 auto; }是最稳的组合 - 别用
text-align: center配合legend，它只对 inline 内容生效，而中心对齐实际靠的是块级容器的 margin 自动分配 - 如果要左对齐且带缩进，用
margin-left: 1rem;，别用padding-left，后者会影响legend在fieldset上边框中的锚点位置 - Firefox 对
legend的max-width支持不稳定，换行建议靠white-space: normal;显式声明
用 CSS 自定义 fieldset 圆角和阴影，要注意什么？
圆角和阴影本身没问题，但 fieldset 的边框渲染机制特殊：它的 border-radius 会影响内部所有内容的裁剪区域，包括 legend。
- 加
border-radius后，必须同步加overflow: hidden;，否则legend可能溢出圆角外 - 阴影要用
box-shadow，别试图用border模拟，因为border会被legend“打断” - Chrome 和 Edge 在
fieldset上应用transform（比如scale）会导致legend错位，尽量避免 - 如果需要响应式圆角，用
clamp()控制border-radius值，比如border-radius: clamp(4px, 2vw, 8px);，比媒体查询更轻量
真正麻烦的从来不是加样式，而是 legend 和 fieldset 之间那层看不见的布局契约——改一个属性，可能三个浏览器表现不一致，尤其是涉及尺寸、定位和语义渲染交叉的时候。
立即学习“前端免费学习笔记（深入）”；
