border: 2px dashed #3498db 可直接实现虚线边框，但仅设 border-style: dashed 不生效，因默认 border-style 为 none 且需显式声明 border-width 和 border-color；单独控制某边需拆写如 border-top: 2px dashed #e74c3c；搭配 border-radius 时建议半径 ≤ 2×border-width，过大易断裂；虚线动画推荐用 repeating-linear-gradient 背景或 box-shadow 模拟，避免对 border 直接加 transition。
直接用 border: 2px dashed #3498db 就行，但漏写 border-width 或 border-color 是最常导致虚线不显示或错乱的原因。
为什么只写 border-style: dashed 不生效
浏览器对 border-style 的默认值是 none，哪怕你写了 dashed，只要没同时指定宽度和颜色，整条边框就等于没设。更隐蔽的问题是：只写 border-style: dashed 时，border-width 会退回到浏览器默认的 medium（约 3px），而不同浏览器对 medium 的解释不一致——Chrome 可能渲染成 3px，Firefox 可能是 2.5px，结果虚线段长度和间隔看起来忽大忽小。
必须显式声明三要素：border-width、border-style、border-color。推荐用简写：border: 2px dashed #3498db，一气呵成，无遗漏。
按钮虚线边框怎么单独控制某一边
按钮经常需要「仅上边虚线」或「左右虚线+上下实线」这类混合样式，这时不能依赖简写，得拆开写：
立即学习“前端免费学习笔记（深入）”；
-
border-top: 2px dashed #e74c3c—— 上边虚线，其他边默认为none，不会意外撑开尺寸 -
border-left: 1px dashed #95a5a6; border-right: 1px dashed #95a5a6—— 左右虚线，上下保持无边框 - 如果某边完全不要边框，显式写
border-bottom: none，别留空；否则可能继承父级或 UA 样式 - 记得加
box-sizing: border-box，否则虚线边框会额外增加按钮宽高，破坏布局
虚线边框和圆角一起用要注意什么
border-radius 和 dashed 能共存，但圆角半径过大时，虚线会在拐角处断裂、重叠甚至消失。这是因为浏览器在绘制圆角虚线时，会按弧长等分虚线段，当 border-radius 远大于 border-width，分段逻辑容易出错。
安全做法是：把 border-radius 控制在 border-width 的 2 倍以内。例如边框宽 2px，圆角最多设 4px。若设计稿要求大圆角（如 12px），建议改用 outline 或 box-shadow 模拟外层虚线，让主边框保持小圆角或直角。
想让虚线“动起来”怎么办
纯 CSS 动画虚线边框，核心是控制 SVG 路径的 stroke-dasharray 和 stroke-dashoffset，但 HTML 按钮原生不支持 SVG 属性。所以实际能走的路只有两条：
- 用
background-image: repeating-linear-gradient()配合@keyframes动画位移背景位置，适合横/竖单向虚线（比如按钮顶部一条动态虚线） - 更稳妥的是放弃边框动画，改用
box-shadow多层叠加 +opacity或transform动画模拟“闪烁”或“呼吸”效果，性能好、兼容稳、无障碍友好 - 千万别试图给
border加transition——虚线本身没有可插值的中间态，动画只会卡顿或跳变
真正难的不是怎么动，而是动了之后焦点状态是否还能被键盘用户清晰识别。所有动画都该保底一个静态 fallback，比如焦点时加一层 outline: 2px dashed #007bff 并配 outline-offset: 2px。
