firefox旧版本中fieldset的border-radius失效是因浏览器未实现该特性，需加overflow:hidden防legend溢出，或改用div+role="group"模拟语义。
直接用 border-radius 给 fieldset 加圆角，Firefox 旧版本会失效，Chrome 和 Safari 大部分情况下能渲染，但 legend 很可能溢出——这不是 bug，是规范里就写的“legend 嵌入边框”的行为导致的。
fieldset border-radius 在 Firefox 中不生效怎么办
Firefox 直到 v89 才原生支持 border-radius 对 fieldset 的裁剪，更早版本（尤其 v78 之前）完全忽略该属性。不是写法错，是浏览器没实现。
- 必须加
overflow: hidden，否则即使圆角生效，legend仍会突破圆角区域（尤其文字换行或设置了padding时） - 旧版 Firefox 需要降级：用
-moz-border-radius（已废弃，仅兼容性兜底），但别指望它和现代写法表现一致 - 真正稳妥的方案是放弃
fieldset的圆角幻想，改用div+role="group"+aria-labelledby模拟语义，再自由加border-radius
legend 溢出圆角边框的修复逻辑
legend 默认不是普通子元素，而是“锚定在 fieldset 上边框内侧”的特殊块，border-radius 一加，它的定位锚点就乱了。
- 强制
legend { position: static; width: fit-content; margin: 0 auto; }，避免浏览器内置的“嵌入式偏移”干扰 - 绝对不能只设
border-radius而漏掉overflow: hidden—— 这是溢出最常见原因 - 如果 legend 需左对齐，用
margin-left: 1rem，别碰padding-left，后者会改变它在上边框中的锚点位置 - Firefox 对
max-width在 legend 上的支持不稳定，换行建议显式写white-space: normal
fieldset display: contents 的副作用
想用 CSS Grid 或 Flex 布局统一控制内部控件间距？有人试过 fieldset { display: contents; }，确实能绕过 padding 错位问题，但代价明确。
- 屏幕阅读器会跳过整个
fieldset结构，legend不再被识别为分组标题，可访问性直接归零 - IE 完全不支持
display: contents，且无 polyfill - 若坚持用，必须补
role="group"和aria-labelledby="xxx"，并确保id="xxx"指向一个真实存在的元素（比如隐藏的span）
圆角和阴影本身没问题，麻烦永远出在 legend 和浏览器对 fieldset 的隐式渲染规则之间——你调样式时，其实是在和二十多年前的表单渲染逻辑博弈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
