结论是：border: 2px dotted #ccc 最快但不可靠，因浏览器对 dotted 渲染不一致，且与 border-radius 冲突；表格中必须配 border-collapse: collapse 才能对齐点状边框，否则点错位堆叠；真需匀称圆点应改用 border-image 方案。
直接说结论：用 border: 2px dotted #ccc 是最快方式，但别指望它真出“圆点”，也别给它加 border-radius——否则在 Safari 或 Firefox 里点会消失或错位。
为什么 dotted 在表格里看起来不像点？
不是你写错了，是浏览器实现不一致：dotted 在 CSS 规范里根本没规定点的形状、大小和间距。Chrome 和 Firefox 渲染成小方块，Safari 在 1px 宽度下常退化成断续灰线，甚至隐形；只有宽度 ≥ 4px 时，部分引擎才勉强画出可辨识的间隔块。
-
border: 1px dotted #999→ 几乎看不出点，像毛边虚线 -
border: 2px dotted #666→ 方点可见，但拐角处容易连成短横线（尤其th和td交界） -
border: 4px dotted #000→ 点更清晰，但视觉厚重，失去“点状”的轻盈感
表格用 dotted 边框必须配 border-collapse: collapse
如果不加这个，table、th、td 各自渲染自己的 dotted 边框，结果是点对不齐、间隙错乱，四角堆叠出奇怪的“点簇”。border-collapse: collapse 强制共享边框线，让点排成一条可控的节奏。
- 只给
table设border: 2px dotted #e0e0e0，不设th/td边框 → 只有外框是点状 - 想让每个单元格都有点状分隔 → 给
th, td设border-bottom: 1px dotted #ddd（单侧更稳） - 绝对不要写
border: 1px dotted #000; border-radius: 4px→dotted对圆角支持极差，Safari 直接清空点，Firefox 点被拉伸变形
真要圆点/匀称点？绕开 dotted，用 border-image
当设计稿明确要求“等距圆点”或需要高清屏适配时，dotted 就该让位了。核心是准备一张横向平铺的点图（PNG 或 SVG），再用 border-image 控制渲染。
- 切图建议：宽 ≥ 20px、高 = 期望边框粗细，例如
dots-6x6.png（6px 圆点 + 6px 间距） - CSS 写法：
border: 6px solid transparent; border-image: url("dots-6x6.png") 6 / 6px round; - 兼容注意：Safari 需加
-webkit-border-image前缀；iOS 16.4+ 才稳定支持 SVG 作border-image - 响应式陷阱：别用
rem控制点尺寸——dotted和border-image都依赖物理像素对齐，Retina 屏上0.0625rem会被放大，导致点糊、间距崩
最易被忽略的一点：点状边框的“装饰性”远大于“功能性”。它不适合做数据分隔主干线，更适合用在标题栏底部、卡片分隔线这类弱语义区域。一旦放进密集数据表格，点的不稳定性会立刻暴露——这时候，老老实实用 dashed 或细 solid 反而更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
