必须显式声明 border-width 和 border-color 才能使 button 的 dashed 边框生效，仅设 border-style 会导致虚线消失或错位；单边虚线需先清空再单独设置；outline 更适合悬浮式虚线；border-image 需谨慎使用。
直接用 border-style: dashed 就行，但只写这一句大概率没效果——缺宽度、缺颜色、没处理盒模型，虚线会消失或错位。
button 的 border 必须显式声明 width 和 color
浏览器对 button 元素的默认边框行为很特殊：它自带 border（通常为 2px solid），但如果你只覆盖 border-style: dashed，而没写 border-width 和 border-color，旧版 Chrome 或 Safari 可能沿用原宽度和颜色，导致虚线段长不一致甚至不可见。
- 正确写法是完整简写：
border: 2px dashed #3498db - 或分开写：
border-width: 2px+border-style: dashed+border-color: #3498db - 别依赖继承色——
button默认color是深灰，但border-color不一定同步，必须明确定义
单边虚线怎么加？别只改 style
想让按钮只有上边是虚线？不能只写 border-top-style: dashed。因为 button 默认有边框，只改样式不改宽度，其他三边仍保持原样，视觉上会突兀。
- 推荐统一控制：
border: 2px solid transparent先清空所有边框颜色，再单独设某边：border-top: 2px dashed #e74c3c - 如果要保留左右/下边实线，仅上边虚线：
border: 2px solid #95a5a6; border-top: 2px dashed #e74c3c - 注意顺序：后写的属性会覆盖前面同名属性，
border-top必须放在border简写之后才生效
outline 实现“浮出式”虚线边框
当虚线需要不占布局空间、悬浮在按钮外侧（比如 hover 提示或焦点态强调），border 会撑大尺寸，这时该用 outline。
-
outline: 2px dashed #f39c12+outline-offset: 4px是标准组合 - 必须设
outline-offset，否则 outline 会紧贴边框，看起来像加粗了实线 - 焦点状态下 outline 默认存在，如需禁用（例如换用
box-shadow），得加outline: none，但务必配套无障碍方案（如box-shadow: 0 0 0 2px hsla(0,0%,0%,0.3)）
repeating-linear-gradient 要慎用
真要精确控制“6px 实线 + 4px 空隙”，border-image 配 repeating-linear-gradient 是唯一办法，但它在 button 上容易翻车。
- button 的宽高常由内容动态决定，
border-image-slice对尺寸敏感，稍一撑开就拉伸、错位 - 必须配
border: 4px solid transparent才能给 background 留出绘制空间 - 移动端高 DPI 屏幕下，
1px渐变断点可能糊成实线，建议最小单位用2px
最常被忽略的是：button 的 border 在不同浏览器里默认渲染差异比普通 div 大得多，尤其是 Windows 上 Edge 和旧版 IE 的 medium 宽度解释完全不同。所以哪怕只是加个虚线，也别跳过 border-width 显式声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
