最常见的原因是 border-width 为 0 或未设置，css 虚线边框必须有明确宽度值才能显示，否则即使声明 dashed 也完全不可见。
border-style: dashed 为什么虚线不显示
最常见的原因是 border-width 为 0 或没设——css 虚线边框必须有明确的宽度值，否则即使写了 dashed 也完全不可见。
浏览器默认 border-width 是 medium，但某些重置样式（比如 * { border: 0 }）或继承链中没显式声明宽度时，dashed 就会“消失”。
- 务必同时设置
border-width，例如：border: 2px dashed #ccc - 避免只写
border-style: dashed，不配宽度和颜色，等于白写 - 在 Flex/Grid 容器中，子元素若
min-width: 0或overflow: hidden，可能裁掉虚线末端，需检查盒模型边界
虚线间距和长度怎么调：dasharray 和 dashoffset
CSS 原生不支持直接控制虚线“每段多长、间隔多大”，border-style: dashed 的表现由浏览器渲染引擎决定，不同浏览器（甚至同一浏览器不同平台）画出来的虚线节拍并不一致。
真要精确控制，得用 stroke-dasharray + SVG 或 CSS border-image，但代价是兼容性和维护成本上升。
-
border-style: dashed下，Chrome 和 Firefox 对3px dashed的分段逻辑不同；Safari 可能更稀疏 - 想统一效果？改用 SVG
<rect></rect>或伪元素 +background: linear-gradient()模拟虚线 - 如果用
border-image，注意border-image-slice: 1必须设，否则虚线图案会被拉伸变形
移动端虚线模糊或断开的典型原因
高清屏（dpr > 1）下，1px 物理像素的虚线容易被抗锯齿抹掉，尤其当 border-width 设为 1px 时，看起来像点状、断续甚至完全看不见。
立即学习“前端免费学习笔记（深入）”；
这不是 bug，是 subpixel 渲染和设备像素比共同作用的结果。
- 避开
1px dashed，改用2px dashed或0.5px（配合transform: scale(0.5)） - iOS Safari 对
dashed支持较弱，部分老版本会退化成实线，可加@supports (border-style: dashed)做降级 - 不要依赖虚线做关键视觉引导（比如表单必填项标识），它在低端安卓机上可能渲染异常
用 background-gradient 模拟可控虚线的最小可行写法
当设计稿明确要求“3px 线段 + 6px 间隙”，又不想引入 SVG 时，linear-gradient 是最轻量的替代方案。
原理是用背景图层模拟线条走向，通过色块尺寸控制“虚”与“实”的比例。
- 水平虚线：
background: linear-gradient(to right, #999 0, #999 3px, transparent 3px, transparent 9px) - 必须配
background-size: 9px 1px（总长 = 实段+空隙）和background-repeat: repeat-x - 注意
height要 ≥ 渐变高度（如 1px），否则线条被截断；垂直方向同理换to bottom和repeat-y
虚线看着简单，但跨端一致性、像素对齐、语义承载能力这几个地方，很容易在交付前最后一刻暴露问题。
