0.5px的线

ios 0.5px线可直接画，但是安卓不行，用border:0.5px solid red;显示出来的直接是1px。所以用伪类after（before）和transform属性实现。

1、最初实现0.5px的bottom

  <div class="bottom-line">
    画0.5px的线
  </div>
.bottom-line{
    position:relative;
    font-size: 20px;
    200px;
}
.bottom-line::after{
    position:absolute;
    content:"";
    bottom:0;
    left:0;
    border-bottom:1px solid red;
    200px;
    height:1px;
    transform:scaleY(0.5);
}

但是这样在部分安卓手机上，部分地方会消失不见，不显示。

2.进一步优化实现 0.5px bottom

.bottom-line::after{
    position:absolute;
    content:"";
    bottom:0;
    left:0;
    background:red;
    200px;
    height:1px;
    transform:scaleY(0.5);
}

3.这对于大多数元素已经完美解决了，但是input框不支持伪类。所以为了实现input的0.5px border,将boder加在其父元素上

.serach-top form {
    position: relative;
}

.serach-top form::before {
    top: -1px;
    left:-1px;
    position: absolute;
    content: '';
     790px;  
        /* width height比input框的2倍多两个像素 */
    height: 78px;
    border: 1px solid red;
    border-radius: 12px;
    transform-origin: 0 0;
    transform: scale(0.5);
    box-sizing: content-box;
}