为什么CSS dotted点状边框部分宽度下显示为方形而非圆形？

这个差异是浏览器内核的渲染规则导致的，CSS官方规范并没有对dotted点状边框的点形状做强制约束，仅要求点分布均匀、尺寸和边框宽度匹配，具体渲染逻辑由各浏览器厂商自行实现。

目前主流的WebKit/Blink内核（Chrome、新版Edge、Safari等）的渲染规则为：

• 当dotted边框宽度小于4px时，会直接用和边框宽度等大的正方形像素块渲染点：小尺寸下绘制圆形会因为抗锯齿出现边缘模糊的问题，用正方形渲染也能提升低宽度下的边框渲染性能。
• 当dotted边框宽度≥4px时，会渲染为正圆形的点，更符合大众对“点状”的视觉预期。

你给出的示例代码如下：

HTML 代码 #

<p class="dotted3">A dotted border with squares.</p>
<p class="dotted4">A dotted border with circles.</p>

CSS 代码 #

p.dotted3 {border: 3px dotted #000;}
p.dotted4 {border: 4px dotted #000;}

如果需要统一不同宽度下的点状边框形状，可以用背景图模拟边框的方案实现完全一致的效果。

内容的提问来源于stack exchange，提问作者prettypeople