border-style: dashed 必须配合 border-width 和 border-color 使用，因虚线依赖宽度、样式、颜色三要素；单独使用时浏览器默认 medium 宽度和 currentColor 颜色，导致跨浏览器渲染不一致。
直接用 border-style: dashed 就能加虚线边框，但只写这一句大概率失效——浏览器会按默认 medium 宽度渲染，而不同引擎对 medium 的解释不一致，虚线长度、间隔、对齐全不可控。
为什么 border-style: dashed 必须配 width 和 color
虚线不是“样式独立存在”的东西，它依赖于三要素：宽度、样式、颜色。缺一不可。border-style 只管“画什么”，不管“画多粗”和“画成啥色”。没设 border-width 时，浏览器取 medium（IE/Edge 约 4px，Chrome/Firefox 约 3px），导致虚线段在不同设备上忽长忽短；没设 border-color 时，继承父元素 color，可能变成灰色或透明，看起来像没边框。
- 正确写法必须是：
border: 2px dashed #3498db;或分开写：border-width: 2px;+border-style: dashed;+border-color: #3498db; - 别用
border: dashed;—— 这等价于border: medium dashed currentColor;，隐患全在medium和currentColor - 如果只想某一边是虚线，用
border-top-style: dashed;+border-top-width: 2px;+border-top-color: #e74c3c;，别只改style
button 元素用 dashed 边框的常见视觉陷阱
按钮自带默认 border 和 padding，直接加虚线容易和原有边框叠加、尺寸错乱，或者圆角让虚线在拐角处断裂。
- 务必重置基础样式：
border: none;或明确覆盖原边框，再重新定义虚线 - 加
box-sizing: border-box;，否则padding+ 虚线边框会让按钮实际宽高超出预期 -
border-radius别超过border-width的 2 倍，比如边框 2px，圆角最多设 4px，否则虚线在弧角处会拉伸变形甚至消失 - 按钮文字默认居中，但虚线边框若太细（如
1px）在高分屏上可能发虚，建议最小用1.5px或直接2px
outline 实现“浮空虚线”且不影响布局
当你要虚线边框不占空间（比如 hover 时弹出一层虚线提示框），border 会撑开盒子，这时候该换 outline。
立即学习“前端免费学习笔记（深入）”；
-
outline: 2px dashed #95a5a6;不影响盒模型，也不触发重排 - 必须加
outline-offset: 2px;，否则 outline 会贴着边框画，看起来像加粗实线 - 焦点态（
:focus）下 outline 默认存在，若禁用需同步提供替代方案，例如：&:focus { outline: none; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.5); } - outline 不支持单边控制（
outline-top不存在），要单边就得用伪元素或background-image
需要精确控制虚线节奏？用 repeating-linear-gradient
标准 dashed 只能粗略控制宽窄，没法指定“6px 实线 + 8px 空隙”这种像素级节奏。这时得用背景渐变模拟。
- 关键参数顺序不能错：
repeating-linear-gradient(90deg, #3498db, #3498db 6px, transparent 6px, transparent 14px)—— 表示垂直方向，实线 6px，空隙 8px（14−6） - 必须配合
background-size和background-position把渐变定位到四边，例如顶部边框：background-image: linear-gradient(to right, #3498db 6px, transparent 6px); background-size: 14px 1px; background-position: top left; background-repeat: repeat-x; - 伪元素（
::before）更稳妥：避免干扰按钮内容流，也方便做动画（比如dashoffset滚动效果） - 注意性能：复杂渐变在低端设备上可能有渲染延迟，简单场景优先用原生
dashed
真正难的不是怎么画出虚线，而是判断该用哪一层——border 是语义层，outline 是交互层，background 是表现层。选错一层，后面所有适配、动画、无障碍都会卡住。
