0.5像素边框

“度学金”1.0版本中，UI要求列表边框是0.5像素。在IOS手机上border设置成0.5px是可以的，但是在安卓手机上0.5px不显示。如果统一设置成1px，那在IOS手机上线条就会显得非常粗，如果设置成0.5px，那么在安卓手机不显示。

当时采用的方式是全局判断手机的userAgent，如果是ios手机，那么border设置成0.5px，否则，设置成1px。这样做其实还是没有实现安卓手机显示0.5px的效果。

一、先看当时采用的方式：

1、全局做处理

window.G = {
    isIOS : function() {
    let IOSVersions = [8, 9, 10, 11, 12, 13, 14];
    for (let i in IOSVersions) {
        if (~navigator.userAgent.toLowerCase().indexOf('iphone os ' + IOSVersions[i])) {
            return true;
        }
    }
    return false;
    }()
};

先说~符号的意思：按位取反（按位非）运算符，简单的理解就是改变运算数的符号并减去1，当然，这是只是简单的理解能转换成number类型的数据。

定义一个全局变量G，设置一个属性isIOS，值是一个自执行函数，通过判断手机的userAgent，返回值是true或者false。

2、然后在组件实例的data中，通过window.G.isIOS判断，如果是true，border为0.5px，反之。

这样做其实还是没有实现在所有手机上border为0.5px的效果。

二、CSS3实现0.5像素边框

1、首先将目标元素设置成相对定位。

.div{
    position: relative;
    width: 100%;
    line-height: 40px;
}

2、给目标元素加一个伪元素(after或before)，设置成绝对定位

.div::after{
    content: "";
    position: absolute;
    left: 0; 
}

3、宽高设置成目标元素的两倍，边款设置成1px

width: 200%;
height: 200%;
border: 1px solid red;

4、缩小0.5倍

transform-origin: 0 0;
transform: scale(0.5,0.5);

5、设置box-sizing(最关键的)

box-sizing: border-box; //至关重要

这样安卓手机也是可以显示0.5px的。

效果如下：

兼容各个主流浏览器的完整代码

div {
    position: relative;
    width: 100%;
    height: 40px;
}
div:after {
    content: "";
    position: absolute;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #ff0000;
    border-radius:5px;/* 也可以设置圆角 */
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

0.5px直线

方式一：

.box{
  position:relative;
}
.box::after{
  content: "  ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  /* 如果不用 background-color, 使用 border-top:1px solid #ccc; */
  -webkit-transform: scaleY(.5);
  transform:scaleY(.5);
}

方式二（微信团队使用的weiui）

    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    border-top: 1px solid #e5e5e5;
    color: #e5e5e5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 2;

这种方式不管是什么手机都会显示0.5px效果。