css - 在 chrome 中看起来模糊的边框

Question

我在输入类型文本、电子邮件和密码中使用 1 px 实心边框。但是边框的粗细并不完美，输入框左右边框的每一边都很好，但顶部和底部看起来有点朦胧。有些地方的边界看起来是正确的，但在有些地方看起来很模糊。请找到所附图片。

CSS：

.input-control{
    background: transparent;
    border: 1px solid #D8DAE6;
    box-sizing: border-box;
    border-radius: 4px;
    height: 100%;
    width: 100%;
    padding: 27px 20px 16px 20px;
    font-weight: 500;
    font-size: 16px;
    color: #696969;
}

标签： css

Answer 1

这可能是因为低分辨率的屏幕。我有同样的问题，因为我的屏幕是 1366x768。当你有一个低分辨率的屏幕时，当有像 1px 宽度这样的微小细节时，像素就会爆发。

为了更好地理解，您可以调整浏览器窗口的大小，它会在调整大小时显示可变宽度。