点划线边框需同时设置table、th、td的border，且必须启用border-collapse: collapse；仅设table边框无效，因浏览器不支持dot-dash，dashed或dotted更稳妥。
点划线边框必须同时设置 table、th、td 的 border
只给 table 加 border: 1px dot-dash #999 是无效的——浏览器不识别 dot-dash，CSS 标准里没有这个值。所谓“点划线”实际是混合效果，需手动组合：dotted + dashed 无法自动叠加，必须用其他方式模拟。
真正可行的做法只有两种：用 border-image 自定义图案，或用伪元素 + 背景图/渐变。但绝大多数项目不需要那么复杂，直接用 dashed 或 dotted 更稳妥。
-
dashed是标准虚线，支持所有现代浏览器，渲染一致 -
dotted在 Safari 和旧版 Edge 中点距不稳定，高密度小字号下易糊成短线 - 想模拟“点+划”交替？得写
border-image: linear-gradient(...)，但需配border-image-slice: 1，且 Firefox 对 border-image 渲染有偏移风险
border-collapse: collapse 是虚线/点线连续显示的前提
没加这句，th 和 td 的 border 会各自渲染，虚线段在单元格交界处断开、错位，甚至 Chrome 里出现半段虚线消失。
必须写在 table 元素上，对 tr 或 th 设置无效；且它不会自动创建边框，只是合并已存在的边框。
- 正确顺序：
table { border-collapse: collapse; }→ 再设th, td { border: 1px dashed #666; } - 漏掉
border-collapse，哪怕写了三处border，看到的也是双线或断续线 - 别用
border-spacing试图“调间隙”——它只在border-collapse: separate下生效，和collapse冲突
为什么只设 table 边框看不到内部格线
因为表格边框由三层组成：table 外框、th 上下左右边、td 上下左右边。border-collapse: collapse 后它们才合并，但样式必须分别声明。
常见错觉：“我写了 table { border: 1px dashed red; }，怎么格子之间还是实线？”——因为你没给 th 和 td 单独设 border。
- 外框虚线 + 内部实线 = 混搭效果，但需显式写两套规则
- 要全部统一为虚线，必须三者都写：
table, th, td { border: 1px dashed #999; }（注意table的border控制外框粗细，th/td控制格线） -
border-width必须明确，只写border-style: dashed不生效（默认medium宽度不可靠）
用伪类控制局部点划线更安全
纯 CSS 实现“仅第一行下边框为虚线”或“最后一列右边框为点线”，不用 JS，靠伪类 + 单边边框即可。
关键点：这些规则要放在通用 th, td { border: ... } 之后，否则会被覆盖；且单边边框优先级高于四边统一设置。
- 第一行下边框虚线：
tr:first-child td { border-bottom: 1px dashed #999; } - 最后一列右边框点线：
td:last-child, th:last-child { border-right: 1px dotted #999; } - 表头底部加粗虚线：
th { border-bottom: 2px dashed #333; }（会覆盖通用border的 bottom 部分）
真正难的是角落边框合并逻辑——启用 collapse 后，左上角 th 的左、上边框可能被舍弃，得用 :first-child 单独补。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
