去掉 fieldset 默认边框需设 border: none 并同步重置 legend 定位；必须加 overflow: hidden 防圆角溢出；legend 必须为 fieldset 第一个子元素，否则单选框失效；disabled 属性使内部标准表单控件值不提交。
fieldset 默认边框怎么去掉又不丢语义
直接设 border: none 就行，但必须同步处理 legend 的定位——否则它会卡在原位置“悬空”或被裁掉。浏览器把 legend 当作嵌入边框的图例，不是普通子元素，清掉边框后它的默认锚点就失效了。
实操建议：
- 先写
fieldset { border: none; padding: 0; margin: 0; } - 再单独重置
legend：legend { display: block; width: fit-content; margin: 0 auto; padding: 0; font-weight: bold; } - 如果想左对齐标题，用
margin-left: 0.5rem;，别碰text-align——它对legend的居中逻辑没用 - 避免设
line-height或font-size在fieldset上，这会影响legend垂直位置计算
圆角+阴影时 legend 溢出怎么办
border-radius 会让 legend 跑到圆角外，尤其在 Chrome 和 Safari 下明显。这不是 bug，是浏览器渲染机制：fieldset 的边框裁剪区域包含 legend，但默认不启用裁剪。
关键一步必须加：overflow: hidden;。只设 border-radius 不够，漏掉这句，legend 就可能半截露在外面。
立即学习“前端免费学习笔记（深入）”；
其他注意点：
-
legend文字换行时容易偏移，加white-space: normal;显式声明 - Firefox 对
max-width支持不稳定，优先用width: fit-content; - 阴影（
box-shadow）本身不影响legend，但和border-radius + overflow: hidden配合才安全
fieldset[disabled] 禁用后值还提交吗
会丢。只要 fieldset 带 disabled 属性，里面所有标准表单控件（input、select、textarea、button）的值都不会进表单数据，哪怕它们自己没写 disabled。
但要注意边界情况：
-
contenteditable元素、自定义组件（比如封装的Switch）不受影响，fieldset[disabled]对它们无效 - 某个
input自己写了disabled="false"，也没用——父级fieldset的禁用优先级更高 - 如果只是视觉灰化但还想保留提交值，别用
disabled，改用fieldset[aria-disabled="true"]+ CSS 控制样式 -
:disabled伪类样式有限，建议额外加 class（如.is-disabled）统一控制外观
legend 放错位置导致单选框失效
常见错误是把 input 直接塞进 legend 标签里，比如：<legend>性别<input type="radio">男</legend>。这会让单选框变成 legend 的内容，而不是 fieldset 的子控件，结果是点击无效、无法聚焦、屏幕阅读器读不到。
正确结构只有一条铁律：legend 必须是 fieldset 的第一个子元素，且所有表单控件都得在 legend 之后、fieldset 闭合前。
示例：
<fieldset> <legend>性别</legend> <label><input type="radio" name="sex" value="male">男</label> <label><input type="radio" name="sex" value="female">女</label> </fieldset>
另外，legend 里放图片可以，但别放交互控件；如果真需要图标+文字，用 <span> 包文字，img 单独放，都放在 legend 内部没问题。
