css - 边框 px 是如何工作的？

Question

这里发生了一件奇怪的事情。

当我设置

border-bottom: 0.5px;

和

border-bottom: 1px;

我可以在我的电脑上看到不同之处。但是当我在像 codepen 这样的在线编辑器中使用相同的系统时，我看不出有任何区别。

这里有一个小片段供大家观看:

.teste {
display: inline-block;
width: 10vw;
height: 10px;
}

.teste1 {

border-bottom: 0.1px solid black;

}

.teste2 {

border-bottom: 0.4px solid black;

}

.teste3 {

border-bottom: 0.5px solid black;

}

.teste4 {

border-bottom: 1px solid black;

}

.teste5 {

border-bottom: 1.5px solid black;

}

.teste6 {

border-bottom: 2px solid black;

}

<div class="teste teste1"> </div>
<div class="teste teste2"> </div>
<div class="teste teste3"> </div>
<div class="teste teste4"> </div>
<div class="teste teste5"> </div>
<div class="teste teste6"> </div>

在这段代码中，我唯一能看到的区别是 1px 和 1.5px。

所以，这是我的问题:

DOM 如何与这些度量一起工作？它看到 0.1px 和 0.5px 之间的区别了吗？

如果我能在我的屏幕上看到差异，我的访问者也会看到吗？

Answer 1

如果要考虑与浏览器无关的网站设计，您应该假设小数 px 值四舍五入为最接近的整数。

HTML DOM API 报告的元素尺寸始终以“DOM 像素”为单位 - 数字四舍五入到最接近的整数。元素之间的距离总是以整数“DOM 像素”表示。

所以像 1.25px 这样的东西在网页设计中没有太大意义。

“DOM 像素”是一个逻辑长度单位，大致等于 1/96 英寸。就像在 110 PPI 显示器上一样，1px 等于 1 个物理像素。但是在 192 PPI 显示器上，一个 1px 映射到 2 个物理像素。

现代 DOM 和 CSS 无法处理物理像素单元。

AFAIR 这是引入“极细”单元的尝试，但我认为它们不会通过。