html - 边框小于1像素，这是怎么回事？

Question

我的页面上有一个输入框<input class='cv-input cv-dashboard-input'> ，定义了以下规则:

input.cv-dashboard-input {
    font-family: Roboto;
    font-weight: 300;
    color: #004d6f;
    border: 1px solid #adadad;
    border-radius: 0px;
    font-size: 14px;
    transition: all 0.3s;
    margin: 0;
    box-sizing: border-box;
}

input.cv-input {
    height: 42px;
    width: 100%;
    padding: 5px;
    font-family: Roboto;
    font-weight: 300;
}

当我在 Firefox 中检查此元素并检查其计算尺寸时，它指出我的边框宽度为 0.583333px。我以为最小渲染尺寸是 1 px，那么这是怎么发生的呢？

我使用的是 Firefox 54.0.1(32 位)

Answer 1

使用CSS确实可以渲染0.5px。这个问题的答案很简单，CSS 中的 px 并不总是转换为计算属性上的一个像素，因为它可能会受到屏幕密度的影响。您可以在这里阅读更多相关信息:https://www.w3.org/TR/CSS21/syndata.html#length-units

我想提一下，我使用的是高 dpi 屏幕，这可以解释为什么我的计算属性非常准确。

顶部边框的顶部宽度为 0.5 像素。