dotted由离散圆点构成、间距固定，dashed由等长线段与空白交替组成、节奏更硬朗；dotted在高缩放或retina屏易糊成短线，dashed更稳定；表格中需加border-collapse: collapse避免双倍间隙。
border-style: dotted 和 dashed 的实际差异
两者都是虚线类边框，但渲染逻辑完全不同：dotted 是由离散圆点构成，每个点是正方形像素块（浏览器渲染时可能略带椭圆），间距固定；dashed 是由等长线段 + 等长空白交替组成，线段长度通常大于点径，视觉节奏更“硬朗”。在高缩放比或 Retina 屏上，dotted 容易糊成短线，dashed 更稳定。
常见误判：以为 dotted 就是“小虚线”，其实它和 dashed 不可互换——比如用 dotted 做分隔线，横向表格中容易被误读为“数据缺失标记”；而 dashed 更适合作为临时/非正式边界提示。
给 table/th/td 同时设 border 时必须加 border-collapse
不加 border-collapse: collapse 会导致：每个 th 和 td 自带默认边框，相邻单元格之间出现双倍宽度缝隙（比如都设 1px dotted #999，实际看到的是 2px 间隙 + 两个点列）。这不是 bug，是 CSS 表格的默认分离模型（border-collapse: separate）行为。
实操建议：
- 统一用
table { border-collapse: collapse; }开头，再设th, td { border: 1px dotted #ccc; } - 若只想要外边框，不要内线，就只给
table设border，并确保th, td的border为none -
hidden值在border-collapse: collapse下会“吃掉”相邻边框（优先级高于solid），适合做条件性隐藏，但none在此时可能仍留白
dotted/dashed 在响应式表格中的兼容风险
移动端小屏下，dotted 边框点距可能小于 1px，导致部分 Android WebView 渲染为实线或完全消失；dashed 在 iOS Safari 15.4 之前对窄列（width: 1rem）支持不稳定，线段会被截断。
规避方式：
- 避免在
font-size 或列宽 dotted - 用
border-image替代（如border-image: linear-gradient(90deg, #000 50%, transparent 50%) 1模拟可控虚线），但 IE 不支持 - 真要保底，改用
background-image绘制重复背景图，配合background-clip: padding-box
单边设置 dotted 或 dashed 的典型场景
不是所有边都得一样样式。比如表头下方加 dashed 分隔、最后一行加 dotted 底线、奇数行右边界用 dotted 强化列对齐——这时必须用单边属性，否则会覆盖其他边。
正确写法示例：
th {
border-bottom: 2px dashed #666;
border-left: none;
border-right: none;
border-top: none;
}
tr:last-child td {
border-bottom: 1px dotted #999;
}
注意：border: 1px dotted #000 是 shorthand，一旦使用，会重置所有四边；想单独控制某一边，必须用 border-bottom-style、border-bottom-width、border-bottom-color 拆开写，或直接用 border-bottom。
dotted 和 dashed 的像素级表现、浏览器渲染策略、以及和 border-collapse 的耦合关系，稍不留意就会让表格看起来松散、错位或干脆不显示。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
