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 及已上时使用