border: 1px dashed #ccc 在移动端无法实现视觉 1px 虚线，因高 DPR 设备会将虚线段与间隙整数倍放大（DPR=2 时变为 2px+2px），导致粗糊不均；iOS Safari 不支持 0.5px dashed，安卓 WebView 多忽略小数 border-width；应改用 repeating-linear-gradient 背景模拟，通过 background-size 精确控制周期与高度，适配 DPR。
直接用 border: 1px dashed #ccc 在移动端无法实现“视觉 1px 虚线”，因为高 DPR 设备（如 iPhone、部分安卓机）会把每个虚线段和间隙都放大 2–3 倍，导致整体粗、糊、不均匀。真正可用的方案是绕开 border-style，改用渐变背景模拟。
为什么 border-style: dashed 在移动端失效
浏览器对 dashed 的渲染不走亚像素逻辑，而是按设备物理像素整数倍绘制：DPR=2 时，1px 虚线段 → 渲染为 2px 宽 + 2px 间隙；DPR=3 时变成 3px+3px，虚实比例崩坏。更糟的是，iOS Safari 对 0.5px dashed 完全不支持，安卓 WebView 多数直接忽略小数 border-width。
repeating-linear-gradient 模拟虚线的核心写法
用背景渐变替代边框，完全可控虚线长度、间隙、颜色和缩放行为，且天然适配 DPR：
- 底部单边虚线（推荐）：
.dashed-bottom { background: repeating-linear-gradient( to right, #ddd, #ddd 6px, transparent 6px, transparent 12px ); background-size: 12px 1px; background-repeat: repeat-x; background-position: bottom; } - 必须设
background-size：第一个值是虚线周期（实+空），第二个值是线高；1px高度在 DPR=2 下会被自动映射为 2 物理像素，但因是纯色块，边缘锐利无模糊 - 避免用
height: 1px+transform: scaleY(0.5)：虚线段缩放后各段错位，间隙不均，滚动时易出现跳动 - 若需四边虚线，改用
border-image+linear-gradient，但兼容性略低（iOS 11.3+ / Android 6.0+）
适配不同 DPR 的关键处理
不能只靠媒体查询硬切 scale，因为虚线本质是重复图案，应让图案密度随 DPR 提升：
立即学习“前端免费学习笔记（深入）”；
- 用 JS 注入
data-dpr到<html>，再配合 CSS 自定义属性：[data-dpr="2"] .dashed-bottom { background-size: 6px 0.5px; } [data-dpr="3"] .dashed-bottom { background-size: 4px 0.33px; } - 注意：CSS 不支持
0.33px作为background-size的值，实际生效的是向上取整后的物理像素，所以更稳做法是保持1px高度，仅调整周期宽度（如12px→8px），让虚线“变密”而非“变细” - 禁用
background-clip: padding-box：它会让虚线被圆角裁剪，造成首尾段不完整；如需圆角，应在父容器加overflow: hidden统一裁剪
最难的不是写出渐变代码，而是意识到虚线不是“边框的变体”，而是一个独立的视觉节奏单元——它的长度、间隙、对齐必须脱离盒模型约束单独调控，否则 DPR 变化时，虚线就会从“精致分隔线”退化成“抖动噪点”。
