android 极细线

最后找到一个还算好用的方法：伪类 + transform
原理是把原先元素的 border 去掉，然后利用:before或者:after重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位

单条 border

.hairlines li{     
    position: relative;     
    border:none; 
}
.hairlines li:after{     
    content: '';     
    position: absolute;     
    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; 
}

四条 border

.hairlines li{     
    position: relative;        
    border:none; 
}
.hairlines li:after{     
    content: '';     
    position: absolute;     
    top: 0;     
    left: 0;     
    border-bottom: 1px solid #000;     //设置底边框极细线
    -webkit-box-sizing: border-box;     
    box-sizing: border-box;     
    width: 200%;     
    height: 200%;     
    -webkit-transform: scale(0.5);     
    transform: scale(0.5);     
    -webkit-transform-origin: left top;     
    transform-origin: left top; 
}

//一般不用

样式使用的时候，也要结合 JS 代码，判断是否 Retina 屏

if(window.devicePixelRatio && devicePixelRatio >= 2){
    document.querySelector('ul').className = 'hairlines';
}

这样会影响点击事件，所以在可以点击的地方的z-index大于加了极细线的，这样加了极细线的地方就不会挡住它上面的可以点击的地方。

 

下面的方法没有尝试：

在app应用开发中，我们常常都需要用到css3来设置应用的样式。由于app都是在移动设备上进行展示，所以边框描边的线一般都小于1px，而以往我们使用的都是1px及以上的。那么问题来了，对于小于1px的边框怎么处理呢？为大家介绍几种css3中细线边框的写法，希望对遇到类似问题的童鞋有帮助。
1、做一张高2像素（1像素有颜色1像素没颜色）的图片做背景，bg-size设置宽100%，高1px
.line li{  
            background: url('line.png') left top no-repeat;
            background-size: 100% 1px;
            background-position: left bottom;}
<ul class="line">
    <li></li>
    <li></li>
    <li></li>
</ul>
这种方法有一个问题，就是左右边框描边虽然可以做旋转(transform) ，但如果要是边框更换颜色那岂不是还要再做图片了；
2、通过上面的方法，我们也很容易联想到线性渐变（linear-gradient），具体实现如下：
.line li{  border: none;
  background-image: -webkit-linear-gradient(#222 50%,transparent 50%);
  background-image: -moz-linear-gradient(#222 50%,transparent 50%);
  background-image: -o-linear-gradient(#222 50%,transparent 50%);
  background-image: linear-gradient(#222 50%,transparent 50%);
  background-size:  100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;}
<ul class="line">
    <li>linear-gradient</li>
    <li>linear-gradient</li>
    <li>linear-gradient</li>
</ul>
这种方法仍然不够完美，改变描边位置（left，top，right，bottom）时需要修改参数，如 left描边需要改变：
background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);
background-size:  1px 100%;
background-position: left;

3、那还有什么方法可以解决细线边框问题呢？我们不妨可以试试了CSS3阴影（box-shadow），用阴影做描边然后用伪类把多余的给遮罩着：
.line li{box-shadow: inset 0 -1px 1px #000;background: #fff;margin-left: -1px;margin-bottom: 10px;position: relative;}
.line li::after{content:'';position: absolute;top:0;left: 0px;right: 0px;bottom: 0px;border: 1px solid #fff;}
<ul class="line">
    <li>box-shadow</li>
    <li>box-shadow</li>
    <li>box-shadow</li>
</ul>

虽然，小编分享的几种方法都还存在瑕疵，具体使用哪种方法，你可以根据你的情况而定。如果你有更完美的解决方案的话，也欢迎分享出来，大家一起学习，一起进步。