虚线边框不显示的首要原因是border-width为0；必须显式设置border-width、border-style和border-color，仅写dashed无效，且css重置库可能将其覆盖为0。
虚线边框不显示？检查 border-width 是否为 0
很多情况下写上 border-style: dashed; 却看不到虚线，根本原因是没设 border-width。CSS 中只要 border-width 为 0（或未声明，默认是 medium，但某些重置样式会覆盖），虚线就完全不可见。
必须显式设置宽度，例如：
div {
border: 2px dashed #999;
}
-
border: dashed单独写无效——缺少宽度和颜色，浏览器会忽略整个声明 - 用简写
border最稳妥；若分开写，至少要同时有border-width、border-style、border-color - 注意某些 CSS 重置库（如 Normalize.css）会把
border设为0，需手动覆盖
虚线太密或太疏？调整 border-width 和容器尺寸
dashed 的虚线长度和间隔由浏览器渲染引擎决定，**不接受自定义 dash/Gap 长度**，但实际密度受两个因素影响：一是 border-width，二是元素本身的尺寸和缩放（transform: scale() 或 zoom）。
- 增大
border-width（如从1px到4px）会让每一段 dash 更粗、间隙更明显，视觉上“更稀疏” - 在高 DPI 屏幕或
zoom: 0.75下，虚线可能糊成实线——这不是 bug，是像素对齐限制 - 小尺寸元素（如
width: 10px; height: 10px;）加dashed边框，可能只显示一两个点甚至完全不可见
圆角 + 虚线边框出现直角缺口？border-radius 和 dashed 兼容性要注意
Chrome/Firefox/Edge 新版本基本能正确渲染带 border-radius 的虚线边框，但 Safari（尤其 iOS 15 及更早）存在已知问题：圆角处虚线断裂、起点错位，甚至退化为实线。
- 避免在需要强兼容的场景（如移动端表单边框）中混用
border-radius和dashed - 替代方案：用
background-image模拟虚线（如repeating-linear-gradient），它可与border-radius完美配合 - 若坚持用
border，建议测试目标 Safari 版本，必要时加@supports (border-style: dashed)条件性启用
伪元素画虚线边框？小心 pointer-events 和层叠顺序
当主元素需要透明背景或内容交互，常用 ::before 或 ::after 绘制虚线边框。这时容易忽略两个关键点：
- 伪元素默认没有
content，必须设content: ""才能渲染 - 伪元素默认
pointer-events: auto，会拦截鼠标事件——如果父容器内有按钮或输入框，点击可能失效；应加pointer-events: none - 确保伪元素的
z-index正确：若父容器有overflow: hidden，伪元素超出部分会被裁剪，此时需提升父容器的position和z-index
真正难处理的是虚线在不同缩放、不同设备像素比下的渲染一致性——它不是纯逻辑问题，而是光栅化结果，得靠实机验证，不能只信开发工具里的预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
