CSS 1px边框问题两个解决方案

• -webkit-min-device-pixel-ratio

  当前设备的物理像素分辨率与 CSS 像素分辨率比值的最小值

  可以用标准属性min-resolution代替

• -webkit-max-device-pixel-ratio

  当前设备的物理像素分辨率与 CSS 像素分辨率比值的最大值

  可以用标准属性max-resolution代替

1. border-width

.border {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}
@media screen and (min-resolution: 2dppx) {
    .border {
        border: 0.5px solid #000;
    }
}
@media screen and (min-resolution: 3dppx) {
    .border {
        border: 0.333333px solid #000;
    }
}

2. 伪元素 + transform

.border {
    height: 100px;
    width: 100px;
}
.border::after {
    content: '';
    display: block;
    height: 100px;
    width: 100px;
    border: 1px solid #000;
}
@media only screen and (min-resolution: 2dppx) {
    .border::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}
@media only screen and (min-resolution: 3dppx) {
    .border::after {
        -webkit-transform: scaleY(0.33);
        transform: sacleY(0.33);
    }
}

---

📘📘欢迎在我的博客上访问：
https://lzxjack.top/