为什么虚线 CSS 边框有时显示为正方形而不是圆形？
Why do dotted CSS borders sometimes show as squares instead of circles?
考虑以下代码
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;}
为什么 3px 的边框看起来像正方形，而 4px 的边框看起来像圆圈？
image: difference between 3 and 4px with dotted border
这似乎是一些浏览器的常见行为，可能是为了避免边框质量下降。看一些例子。
Chrome（版本 92.0）
Edge（92.0 版）
Safari（版本 12.1）
在这里，虚线边框始终显示为正方形，即使它更宽（图像显示了 3px 和 15px 边框之间的比较）。
在 Firefox（版本 92.0） 中，边框不会变成方形。但是，您会注意到它的圈子质量有所下降。
考虑以下代码
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;}
为什么 3px 的边框看起来像正方形，而 4px 的边框看起来像圆圈？
image: difference between 3 and 4px with dotted border
这似乎是一些浏览器的常见行为，可能是为了避免边框质量下降。看一些例子。
Chrome（版本 92.0）
Edge（92.0 版）
Safari（版本 12.1）
在这里，虚线边框始终显示为正方形，即使它更宽（图像显示了 3px 和 15px 边框之间的比较）。
在 Firefox（版本 92.0） 中，边框不会变成方形。但是，您会注意到它的圈子质量有所下降。