边框0.5px和解决1px的问题

工作中遇到了一个产品需求，要求把列表分割线改成0.5px，直接写成border：0.5px solid #cccccc;是不符合规范的写法，会存在Android和IOS手机上的兼容问题，故，我们可以利用CSS3的transform特性，放缩边框宽度来实现这一效果。

<ul class="mBasicBorder_box">
    <li class="mBasicBorder_scale_border">边框宽度0.5px</li>
    <li class="mBasicBorder_scale_border">边框宽度0.5px</li>
    <li class="mBasicBorder_scale_border">边框宽度0.5px</li>
    <li class="mBasicBorder_scale_border">边框宽度0.5px</li>
</ul>

.mBasicBorder_box{
    padding:15px;
    max-width: 640px;
    margin: 0 auto;
}
.mBasicBorder_scale_border{
    width:100%;
    height:50px;
    line-height: 50px;
    position: relative;
}
.mBasicBorder_scale_border:after{
    content: '';
    height: 1px;  //控制边框宽度
    width: 200%;  //控制边框长度
    position: absolute;
    left: 0px;
    top: auto;
    right: auto;
    bottom: 0px;
    background-color: #eeeeee;
    border: 0px solid transparent;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    transform: scale(0.5);  //缩放宽度，达到0.5px的效果
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform-origin: top left;  //定义缩放基点
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
}

把对应的class名写到需要添加边框的元素上。按需添加

h1 {
  position: relative;
}

h1:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: red;
  transform: scaleY(1);
  transform-origin: 0 0;
}

@media screen and (min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2) {
  h1:after {
    transform: scaleY(0.5);
  }
}

对于需要四边0.5像素边框，可以用以下方式：

方式：定位 + 伪元素 + transfrom缩放（scale）

<div class="border">0.5像素边框~~~~</div>
<style>
    .border {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        position: relative;
    }
    .border::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        border: 1px solid red;
        transform-origin: 0 0;
        transform: scale(0.5);
    }
</style>