使用伪类 + transform方案:

     原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。

      代码演示 :
           
.box-1px{
  position: relative;
  border: unset;
}
.box-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
left: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }