移动端0.5px实现过程入的坑---有的下边框无法显示

众所周知在移动的端写1px边框，显示出来的效果看起来比较粗，那么下面介绍一种常见的0.5px 的实现方案；

利用css3的缩放方式实现，其原理是：transform:scale()来达到压缩一半的目的。
html部分：

 

       

             {{item.bankName}}
        
 

css3部分：

 .cardItem{
        height:99px;
        position: relative;
        border:none;
        display: flex;
        align-items: center;
      }
      .cardItem:after{
        position: absolute;
        content: '';
        bottom: 0;
        background: #E9E9E9;
        width: 750px;
        height:1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
      }

效果如上，咦！！！怎么有的下边框不见了呢？经过一番的摸索，发现原来是自己配置了px转 rem导致，因此 cardItem:after中height:1px;会转成相应的rem值，至于为什么导致有的下边框无法显示，个人还是没想明白，在控制台追踪的时候，发现每个 cardItem:after 都是有相同的宽高，还望大神指点！

解决方案： css3中 .cardItem:after中的height值改成height:1px;/*no*/ ,设置/*no*/后就不会将px转成rem了。