CSS手机下0.5px实现

    我爱模板网在做混合APP开发时，遇到了一个问题，即边框0.5px效果。
    0.5px其实是不存在的，因为像素点不可能存在半像素，现在的手机大多都是视网膜屏，逻辑像素都是物理像素的两三倍，我们通常用CSS写的像素尺寸，实际上是逻辑像素，显示到手机上转换成物理像素往往都是放大两到三倍，也就是说0.5px，显示出来的实际是1px，而CSS写的1px，显示出来实际是2px左右。所以才会出现明明边框是1px，却看起来比较粗。
    我爱模板网于是在代码中，边框都是这么写的：

border-bottom:0.5px solid red;

    在大多数手机下，都没有问题，但是不知道为何在oppo手机下，有时候不显示。最后，用CSS3的缩放实现，发现都没问题了，在这里记录下：

.bottom1px{position: relative;}
.bottom1px:after{
    display: block;
    content: " ";
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    position: absolute;
    bottom:-1px;
    left: 0;
    right: 0;
    z-index:1;
}