border-style: dashed 未生效最常见原因是未同时设置 border-width 和 border-color；CSS border 为复合属性，三者缺一不可，且 border-width 至少为 1px，否则虚线消失。
border-style: dashed 为什么没生效
最常见的情况是只写了 border-style: dashed，但没配 border-width 和 border-color。CSS 的 border 是复合属性，三者缺一不可——哪怕用默认值，浏览器也不会自动补全。
-
border-width至少得是1px（0或none会让虚线直接消失） -
border-color如果不设，多数浏览器会按文本色 fallback，但某些旧版 Safari 可能渲染成透明 - 推荐写法：
border: 2px dashed #999，一条声明搞定三要素
虚线长度和间隔怎么调
CSS 原生不支持直接控制虚线的“每段多长、间隔多大”，dashed 的 dash 和 gap 长度由浏览器按 border-width 自动计算（通常是 width × 3 ~ 4 倍 dash，width × 3 ~ 6 倍 gap），所以想微调只能靠改粗细或换方案。
- 加粗边框（如
4px dashed）会让虚线段更长、间隙更宽 - 想精确控制？用
border-image配 SVG 或 base64 图片，例如：border-image: url("data:image/svg+xml,%3Csvg...%3E") 12 round - 现代方案也可用
box-shadow模拟，但仅适用于单边或简单场景
Firefox 和 Safari 下虚线对不齐怎么办
这是真实存在的渲染差异：Firefox 倾向把虚线起点锚定在左上角，Safari/Chrome 更倾向中心对齐，导致多边框容器（如 div 四边都设 dashed）在转角处出现错位或断点。
- 避免四边同时用
dashed，改用outline+outline-offset做外轮廓（但 outline 不占布局空间） - 若必须四边虚线，加
border-radius: 1px（不是 0）可缓解 Safari 转角断裂 - 更稳妥的做法：用
background-image: repeating-linear-gradient(...)手动画边框，完全可控
div {
background-image:
repeating-linear-gradient(90deg, #ccc, #ccc 5px, transparent 5px, transparent 10px),
repeating-linear-gradient(0deg, #ccc, #ccc 5px, transparent 5px, transparent 10px);
background-position: top left, top left;
background-size: 10px 1px, 1px 10px;
background-repeat: repeat-x, repeat-y;
}
移动端虚线变实线或消失
部分安卓 WebView（尤其 Android 4.x）和 iOS 低版本 Safari 对 dashed 支持不完整，有时会退化为实线，甚至整条边框不渲染。
立即学习“前端免费学习笔记（深入）”；
- 优先检测是否启用了
-webkit-appearance: none，它可能干扰边框渲染 - 给元素加
transform: translateZ(0)或will-change: border强制硬件加速，可唤醒部分 WebView 的虚线支持 - 终极兼容方案：不用
border，改用伪元素::before绘制 SVG 虚线，100% 可控
dashed 万能，该上 background-image 或 SVG 就上。 
