fieldset 默认不支持精美虚线边框，因 legend 与边框的视觉冲突、浏览器默认样式干扰及语义弱化风险；直接设 border 会因默认 padding/margin、legend 定位差异、safari 渲染异常等问题导致断线、留白不均；稳妥方案是手动接管 legend 布局或改用 div + aria-label。
fieldset 默认不支持虚线边框，直接写 border: 2px dashed #333 会生效，但「精美」的关键不在边框样式本身，而在它和 legend 的视觉冲突、浏览器默认样式干扰、以及表单语义被弱化的风险。
为什么直接加 border 看起来丑？
多数浏览器给 fieldset 设了默认 border 和 padding，legend 又默认居中且「切」进边框里——虚线一加，legend 上方的虚线断开、左右留白不均，边缘毛糙。这不是你 CSS 写错了，是原生行为。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- Chrome/Firefox 对
legend的定位逻辑不同，虚线在legend位置常出现缺口 -
fieldset的margin和padding未重置时，虚线框容易和内部控件贴太近或太远 - 部分旧版 Safari 会把虚线渲染成点线（
dotted），而非预期的短划线（dashed）
真正能控制虚线边框的最小可行方案
放弃依赖 legend 的自动切边行为，用 CSS 手动接管布局。核心是：隐藏原生 legend 边框交互，用普通 <div> 模拟标题，并确保 <code>fieldset 的 border 渲染干净。
fieldset {
border: 2px dashed #666;
padding: 16px;
margin: 0;
}
fieldset legend {
width: auto;
margin: 0;
padding: 0 12px;
font-weight: bold;
background: white; /* 盖住虚线，制造「切口」错觉 */
}
/* 或更稳妥：不用 legend，改用 div + aria-label */
替代方案：不用 fieldset 更省心
如果只是要视觉分组+虚线边框，且不需要无障碍语义（如屏幕阅读器识别表单域组），<div role="group" aria-labelledby="info-label"> 配合 <code>border 更可控。尤其当设计要求虚线带圆角、阴影或 hover 动效时，fieldset 的盒模型限制明显。
-
fieldset的border-radius在所有浏览器中都兼容，但legend不会自动圆角裁剪，导致文字溢出 - 想加
box-shadow？fieldset在 IE11 及部分安卓 WebView 中不支持 - 移动端点击
fieldset区域，iOS Safari 有时触发意外缩放
虚线边框本身很简单，难的是让 legend 和虚线共存得自然。真要「精美」，要么彻底接管 legend 样式（包括用 transform 微调位置），要么承认 fieldset 是语义容器，不是装饰元素——这时候换 div 反而更快更稳。
