虚线边框必须配合 border-width 才能显示，单独设置 border-style: dashed 通常无效；高 DPI 屏易糊成实线，建议用 2px 宽度或 background-image 模拟；border-radius 下易断裂，推荐伪元素或 box-shadow 替代。
border-style: dashed 必须配 border-width 才能显示
只写 border-style: dashed，边框大概率是透明的——因为 CSS 默认 border-width 是 medium（约 3px），但某些浏览器或重置样式下可能回退为 0。虚线不是“样式开关”，它依赖宽度值参与渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用简写最稳妥：
border: 2px dashed #999，一次性声明宽、型、色 - 若需单独控制某一边，必须成对出现：
border-bottom-style: dashed+border-bottom-width: 2px，缺一不可 - 颜色可省略，会继承当前
color；但别依赖这点，显式写border-color更可控
拖拽区域虚线边框在高 DPI 屏上变实线？这是渲染限制
在 Retina 或 Windows 高缩放屏上，1px dashed 经常糊成实线。根本原因：浏览器把虚线段和间隙都向下取整到 ≥1 设备像素，1px 宽度下 dash 和 gap 都被压成 1px，视觉上无缝衔接。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 直接改用
border: 2px dashed #ccc，确保每段至少占 1 个物理像素 - 避免
transform: scale()或全局zoom，它们会让虚线计算进一步失真 - 真要保 1px 视觉粗细，用
background-image: repeating-linear-gradient()模拟，比如：background-image: linear-gradient(to right, #999 50%, transparent 50%)配合background-size: 8px 1px
border-radius 和 dashed 共存时边框断裂？别硬扛
圆角容器加 border-style: dashed，拐角处常出现虚线截断、首尾不闭合，甚至整条边只剩几个点。这是因为浏览器把直线虚线算法强行映射到弯曲路径上，而规范没定义如何“弯”虚线。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃原生
dashed，改用伪元素绘制独立虚线层：::before绝对定位，设border-bottom: 2px dashed #999，再手动 offset 到目标边位置 - 若只需顶部/底部虚线分隔，优先考虑
box-shadow: inset 0 -2px 0 #999配合background-clip模拟，更稳定 -
outline: 2px dashed #999可作为辅助线（不占布局空间），但它不支持border-radius，所以只能用于无圆角场景
React/Vue 中动态切换虚线边框容易漏掉什么
框架里常通过 className 或内联 style 控制是否显示虚线，但高频出错点是：条件渲染时只切样式，忘了宽度或颜色声明。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 class 方式最稳：
.drop-area--dragging { border: 2px dashed #007bff; }，JS 里只管加删 class - 避免字符串拼接 style：
style={`border: ${isDragging ? '2px dashed #007bff' : 'none'}`}—— 这里none会清掉整个 border，下次切回来得重新声明所有属性 - 如果用 CSS-in-JS（如 styled-components），确保虚线规则带完整三元组，别写成
border-style: ${isDragging ? 'dashed' : 'none'}
border-radius、devicePixelRatio、框架响应式更新这三块最容易翻车——尤其是拐角断裂和高清屏糊边，这两个问题不会报错，只会在特定设备上静默失效。 
