.border-1px{ position: relative; } .border-1px::after{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-bottom: 1px solid rgb(217,217,217); content: ' '; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) { .border-1px::after { -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } } @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { .border-1px::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } |
a.直接切图解决
b.实现适配移动端1px边框,主要是根据设备的dpr来对边框进行缩放处理,CSS写法如下: