border-style: dashed 要生效需 border-width ≥2px，否则因浏览器渲染取整呈实线；须用 border 简写声明宽/样/色，配 box-sizing: border-box，并避免与 border-radius 同用。
直接用 border-style: dashed 就能实现，但多数人卡在边框“看起来是实线”或“圆角处断开”上——本质不是写错了，而是浏览器渲染限制和盒模型细节没处理好。
为什么写了 border-style: dashed 却像实线？
这不是代码错误，是浏览器对虚线的底层渲染规则导致的：
-
border-width设为1px时，dash 和 gap 都被强制取整为 1px，视觉糊成实线；必须 ≥2px才可靠显示虚线节奏 - 高缩放（如
zoom: 150%）、Retina 屏未做device-pixel-ratio适配时，同样会触发该问题 - 如果同时写了
border: 1px solid #000和border-style: dashed，后者会被前者覆盖（border是简写，优先级更高）
按钮加虚线边框的正确写法（含防坑）
别只写 border-style，要组合控制宽度、颜色、盒模型：
- 用
border简写一次性声明：border: 2px dashed #3498db（推荐，避免遗漏宽度） - 显式加
box-sizing: border-box，否则虚线边框会让按钮变宽，破坏布局对齐 - 若按钮背景透明，记得补
background: transparent，防止某些 UA 样式干扰 - 避免和
border-radius同时使用——圆角会让虚线在拐角处断裂或消失，真要圆角就换方案
需要单边虚线或不对称效果怎么办？
不用删掉其他三边，用独立方向属性更可控：
- 只顶部虚线：
border-top: 2px dashed #e74c3c，其余设为border-right: none等 - 左右虚线、上下无边：
border-left: 2px dashed #95a5a6; border-right: 2px dashed #95a5a6; border-top: 0; border-bottom: 0 - 注意：单独设某边时，
border-color和border-width不继承，必须重写，否则可能意外变成黑色细线
想精确控制虚线长度/间隔？别硬刚 border-style
border-style: dashed 的 dash/gap 比例由浏览器决定，无法通过 CSS 调节。一旦设计要求明确节奏（比如「3px dash + 6px gap」），就得绕开原生虚线：
- 用
background-image: repeating-linear-gradient(...)在背景里画，配合background-position和background-size控制起始与密度 - 或用
outline: 2px dashed #f39c12; outline-offset: 4px叠一层外轮廓（不占布局空间，但不支持圆角） - 绝对别用多个
box-shadow去模拟——响应式下错位、缩放后模糊、性能差
最常被忽略的是：虚线不是装饰开关，它和尺寸、缩放、圆角、盒模型绑在一起。写完先在 125% 缩放下看一眼，再点开开发者工具检查 computed styles 里的实际 border-width 值——很多“失效”其实从这里就开始了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
