0.5px border 实现方案

<div class='thin-border'></div>

.thin-border {

position: relative;

width: 40px;

height: 20px;

}

.thin-border::after {

content: ' ';

position: absolute;

left: 0;

top: 0;

border: '1px solid #000';

border-radius: 4px;

box-sizing: border-box;

width: 200%;

height: 200%;

transform: scale(.5);

transform-origin: left top;

}

在使用前可以先增加 window.devicePixelRatio && window.devicePixelRatio >= 2 的判断，建议像素比在 2 及已上时使用