1px虚线常显示为实线是因浏览器渲染限制，dash/gap最小长度≥1px；须设border-width≥2px，或改用border-image、background、SVG等方案。
直接用 border-style: dashed 很容易出实线，尤其在小尺寸或高缩放下——这不是你写错了，是浏览器渲染限制导致的。
为什么 border: 1px dashed 常常显示成实线
浏览器对虚线有最小 dash/gap 长度限制（通常 ≥1px），当 border-width 设为 1px 时，dash 和 gap 都被强制取整为 1px，视觉上就糊成一条实线。
- 必须设
border-width≥2px，例如：border: 2px dashed #999 - 避免在 macOS Retina 屏或
zoom: 150%页面里依赖1px虚线 - 若设计稿真要求细线效果，别硬调
1px，换background-image或border-image方案
只给某一边加虚线（比如底部）
单独控制某一边时，不能只写 border-bottom-style: dashed，必须同时指定宽度和颜色，否则不生效。
- 正确写法：
border-bottom: 2px dashed #666 - 如果其他三边要无边框，得显式清掉：
border-top: none; border-left: none; border-right: none - 注意顺序：
border: 2px dashed #666后再覆盖某一边（如border-right: 0）也行，但要确保覆盖语句在后
想精确控制虚线段长和间隔？别用 dashed
border-style: dashed 不提供 dash 长度、gap 大小或偏移量的配置项——这是 CSS 规范决定的，各浏览器按自身算法生成，Chrome 和 Firefox 渲染可能不同。
立即学习“前端免费学习笔记（深入）”；
- 需要「3px dash + 6px gap」这种节奏？用
border-image配合linear-gradient：border: 2px solid; border-image: linear-gradient(to right, #000 50%, transparent 50%) 1; - 更稳妥的替代：用
background模拟单边虚线，例如底部虚线可写：background: linear-gradient(to right, #000 0%, #000 50%, transparent 50%, transparent 100%); background-size: 12px 1px; background-repeat: repeat-x; background-position: bottom; - SVG 方案兼容性最好，且支持动画，但代码量略大
真正麻烦的不是怎么写虚线，而是判断这个虚线是否会被用户看见——缩放、DPI、元素尺寸、父容器 overflow 都可能让它消失或变形。上线前务必在 Safari、Chrome、Firefox 和真实移动设备上验证渲染效果。
