ios实现0.5px的几种方法，安卓设备也实用，安卓和ios实现细线边框

//判断ios版本 ，设置一个全局的样式名 hairlines，通过运用样式名，来给不同版本ios添加样式，ios版本不同对于0.5px显示效果也区别很大，同一个设备也是显示出五花八门的效果。
//安卓不需要判断版本，可以跳过js判断。

<script type="text/javascript">
//js放在头部head区域
if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
      var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
        version = parseInt(v[1], 10);
      if(version >= 8){
//ios 8以上版本
        document.documentElement.classList.add(‘hairlines‘)
      }
      if(version >= 9){
        document.documentElement.classList.add(‘hairlines2‘)
      }
    }   
</script>

css样式可以这样写：
.hairlines .go-rt{ border-bottom:none;}

通过伪类制作1px边框细线，边框border设置为none；

/***伪元素的宽高200%才能铺满div的宽度和高度***/

1、设置伪元素的border实现细线0.5px

缺点：被定义的元素的子元素也会自动被添加伪类线条。所以在使用时需要注意。

.hairlines .gray-btn:before{

    content:‘‘;
    width:200%;
    padding:3px;
    height:200%;
    border:1px solid #ccc;
    position: absolute;
    top:0;
    left: 0; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    -webkit-transform: scale(0.5); 
    transform: scale(0.5);
    -webkit-transform-origin:0 0;
    transform-origin: 0 0;
}

2、通过伪元素的高度实现0.5px
.hairlines .mine-pic:before{
    content:‘‘;
    width:200%;
    position: absolute;
    top:0;
    left: 0; 
    right:0;
    -webkit-transform: scale(0.5); 
    transform: scale(0.5);
    -webkit-transform-origin:0 0;
    transform-origin: 0 0;
    height:1px;
    background-color:#ccc;
    }

3、通过阴影实现ios o.5px ，有一些设备会有阴影

#button{  
  background-image:linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%),
  linear-gradient(270deg, #ccc, #ccc 50%, transparent 50%),
  linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%),
  linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
  background-size: 100% 1px,0px 100% ,100% 1px, 0px 100%;
  background-repeat: no-repeat;
  background-position: top, right top,  bottom, left top;
  padding: 10px;
  margin:20px 0;
  overflow:hidden;
    }