不能，因浏览器对border-style: dotted渲染不可控，chrome显示实心圆、firefox倾向方形点、safari小尺寸下易糊成短线；需用border-image或伪元素模拟才能精确控制点大小、间距与颜色。
直接用 border-style: dotted 能实现“点状”效果，但浏览器渲染不可控——Chrome 渲染为实心圆、Firefox 倾向方形点、Safari 在小尺寸下可能糊成短线；真要精确控制点大小、间距、颜色，必须绕开原生 dotted，用 border-image 或伪元素模拟。
为什么 table, th, td 都得设 border: 1px dotted
表格默认是分离边框模型（border-collapse: separate），table、th、td 各自画自己的边框。只给 table 加 border: 1px dotted，单元格内部依然没边框；只给 td 加，表头和外边框就断了。结果不是“点线”，而是错位、断续、双层点叠加的混乱效果。
- 必须同时写：
table, th, td { border: 1px dotted #999; } -
border-collapse: collapse只作用于table元素，不能加在th或td上 - 漏掉
border-collapse: collapse，点之间会因默认间隙而断开，尤其在 Chrome 中点会偏移甚至消失
border-collapse: collapse 是 dotted 能连贯显示的前提
不加 border-collapse: collapse，每个单元格边框独立绘制，dotted 的点阵无法对齐，视觉上就是一堆散点。加上后，相邻边框合并，点才能“接上”。但注意：collapse 不会自动创建边框，它只合并已存在的边框——所以必须先确保 table、th、td 都有 border 声明，否则表格看起来是“没边框”的。
-
border-collapse: collapse必须写在table选择器里，例如：table { border-collapse: collapse; } - 如果只要外边框不要内线，不能靠删
th/td的border，而应保留它们但设为border: none或border: hidden（hidden在collapse下优先级更高） - 移动端小屏下，
dotted点距可能被压缩到小于 1px，部分 Android WebView 会直接渲染成实线
想精确控制点大小？换 border-image 或伪元素
border-style: dotted 的点大小、间距完全由浏览器决定，border-width 只影响整体粗细，不改变单个点直径。要真正可控，得用替代方案：
-
border-image配 SVG：必须用border-style: solid打底 + 显式border-width（如2px），再通过border-image覆盖。SVG 的viewBox宽高建议设为单个圆点直径（如8），用<circle cx="4" cy="4" r="2"></circle>，裁剪方式选round或repeat - 伪元素 +
radial-gradient：适合局部边框（如只给td左侧加点），需position: relative+::before，背景用background: radial-gradient(circle at 0 0, #333 1px, transparent 1px)，再调background-size控制点距 - 两种方案都要求
border-collapse: separate，因为collapse会干扰border-image渲染，也限制伪元素定位
真正要“圆点边框”，别指望 dotted 精确对齐或缩放稳定——它只是示意性工具。复杂需求下，border-image 的 SVG 路径和 radial-gradient 的像素级参数才是关键，稍有偏差就会点阵错位或边缘截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
