为什么有时候点状的CSS边框显示为正方形而不是圆形？

Question

3

考虑以下代码

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;}

为什么3像素的边框看起来像正方形，而4像素的边框看起来像圆形？ image: 用虚线边框显示3px和4px之间的差异

- prettypeople

1

可能取决于浏览器，你正在测试的是哪个浏览器？ - Kevin M. Mansour

1

@KevinM.Mansour 在 Windows 计算机上使用的 Google Chrome 版本为 92.0.4515.159。 - prettypeople

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BSdoukos · Accepted Answer

似乎这是几个浏览器中常见的行为，可能是为了避免边框质量的损失。看一些例子。

Chrome（版本92.0）

Edge (版本 92.0)

Safari（版本12.1）

在这里，虚线边框始终显示为正方形，即使它更宽（图像显示了3px和15px边框之间的比较）。

在Firefox（版本92.0）中，边框不会变成正方形。但是，你可以注意到其圆形有一点失真。