border-style: dashed 是首选虚线方案，因其原生兼容ie8+、无需js或伪元素、语义清晰且准确渲染；但必须显式设置 border-width 和颜色，否则浏览器默认 medium 宽度导致虚线不一致。
border-style: dashed 是最直接、兼容性最好、语义最清晰的虚线边框实现方式。别绕弯子，优先用它。
为什么 border-style: dashed 是首选
它原生支持所有现代浏览器（包括 IE8+），不依赖 JS 或伪元素，不影响盒模型计算，也不需要额外 DOM 节点。你写的每一行 CSS 都会被准确渲染为「短划线」，而不是靠渐变或阴影模拟出来的“像虚线”的效果。
常见错误是只写 border-style: dashed 却忘了设 border-width —— 默认宽度是 medium（约 3px），但不同浏览器解释不一致，导致虚线长度和间隔看起来忽大忽小。
- 必须显式声明
border-width，比如2px或1px - 颜色也建议明确指定，避免继承父级
color导致不可控 - 如果只想某一边是虚线，用
border-top-style: dashed+border-top-width组合，别只改style -
border-radius和dashed可共存，但圆角过大会让虚线在拐角处断裂或重叠，建议border-radius≤border-width的 2 倍
什么时候不能只靠 border？
当你要实现以下效果时，border 本身会失效或受限：
- 虚线不占布局空间（比如悬浮提示框希望边框“浮”在内容外）→ 改用
outline: 2px dashed #999，再加outline-offset: 2px控制距离 - 需要精确控制虚线长度（比如 6px 实线 + 4px 空隙）→ 用
background-image: repeating-linear-gradient(...)配合伪元素 - 想让虚线“闪烁”或随状态动态变化 →
box-shadow多层叠加比修改border更易动画，例如：box-shadow: 0 0 0 2px hsla(0,0%,0%,0.3) - 元素本身已有
border，但还要加一圈虚线 →border不支持多层，只能选outline或伪元素方案
repeating-linear-gradient 画虚线的坑
这是唯一能像素级控制虚线节奏的方式，但容易踩错参数顺序和单位。
关键点：
- 方向必须写对：水平虚线用
90deg，垂直用0deg；写反了虚线就变成上下堆叠的色块 - 颜色停点要闭合：比如
repeating-linear-gradient(90deg, #000 0px, #000 6px, transparent 6px, transparent 10px)表示「6px 黑 + 4px 透明」循环 - 伪元素必须设
pointer-events: none，否则会拦截鼠标事件 - 不能直接用在 img 或 button 上（部分浏览器对替换元素的伪元素支持弱），优先包裹一层
div
移动端和高 DPI 屏幕要注意什么
在 Retina 或 Windows 高缩放比设备上，1px dashed 边框可能被渲染成模糊的 2px 实线——这不是 bug，是系统抗锯齿行为。
解决方法很务实：
- 用
border-width: 0.5px（仅 Safari 支持），或退而求其次用1px+transform: scale(0.5)缩放整个边框容器 - 避免在
@media (min-resolution: 2dppx)下硬切样式，不如统一用border-width: 1px+ 调整虚线密度（比如把6px/4px改成3px/2px） - 测试时别只看 Chrome 模拟器，真机连 iOS Safari 和 Android Chrome 都跑一遍，特别是
outline在 iOS 上默认有内阴影，得加-webkit-appearance: none
border-width 是否显式、outline-offset 是否补位、repeating-linear-gradient 的像素停点是否闭合——这些细节不试一遍，光看文档永远不知道哪一步会断。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
