关于移动端H5页面中1px边框的解决方法-

问题提出

这是一个比较老的问题了，我第一次注意到的时候，是UI设计师来找我麻烦，emmm那时候我才初入前端职场，啥也不懂啊啊啊啊啊，情形是这样的：
设计师拿着手机过来：这些边框都粗了啊，我的设计稿上是1px的
我：？？？？我写的是1px呀，不信你看。（说着拿出了css代码
设计师：不对啊我眼睛看来这个边框比我设计稿上粗很多，看起来好奇怪（emmm果然像素眼
我：那我把它改成0.5px你看看（边说边改了代码
设计师一看，点点头，果然好很多。
后来发现同样的代码在某些安卓机上是有问题的，会导致0.5px的线看不见。
奇了怪了，显然改成0.5px不能解决问题，但是确实1px边框看上去比设计稿上要粗很多，原因何在？

1px边框的表现

我直接使用css去定1px的边框，
html:

  
1
  
2

css:

    * {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .hairlines {
      width: 300px;
      margin: 100px auto;
    }
    .hairlines li{
      position: relative;
      margin-top: 10px;
      border-bottom: 1px solid #cccccc; // 边框设置成1px
    }

得到的截图如下：

css如下：

    * {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .hairlines {
      width: 300px;
      margin: 100px auto;
    }
    .hairlines li{
      position: relative;
      border:none;
      margin-top: 10px;
    }
    .hairlines li:after{
      content: &＃39;&＃39;;
      position: absolute;
      left: 0;
      bottom: 0;
      background: #cccccc;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

这样的话，画出的线确实细很多，我在之后长达一年的时间里面一般都是使用上面的方法去解决1px边框的问题，但用着用着，我发现了几个问题：
1.为什么是scaleY(0.5)？这个0.5是怎么得出的？是不是所有机型都是要scale缩小到一半，换句话说是不是通用？
2.如果我要同时画一个容器的四个边框怎么办？
3.支不支持圆角边框？
后两个问题改造一下上面的代码，可以找到解决方法(为了方便查看效果，我把平时写法得出的效果和使用伪类得出的效果放一起，这样更容易看出差别)：

  
  
  
  


粗线

  
1
  
2

细线

  
3
  
4

这样得出的效果图如下：

代码如下：

  
  
  
  
  



  
1
  
2

得到的效果可以看下图(手机上看更明显一些)：

从上来看，回到之前的问题，"1.为什么是scaleY(0.5)？这个0.5是怎么得出的？是不是所有机型都是要scale缩小到一半，换句话说是不是通用？"其实并不一定是0.5,在dpr为3的设备上其实应该是0.3333……，也不通用，因为每个手机的dpr可能不一样，但是方法一中的0.5一般因为至少比1px细，所以也差不多可以满足设计师的要求了。