CSS 实现移动端 1px 线条的绘制

[ly2011]

先放大，再缩小

方法1：

.box:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        right: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #e2e2e2;
    }

方法2：

.box:before{
    content: "";
    pointer-events: none; /* 防止点击触发 */
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border:1px solid #000;
    -webkit-transform(scale(0.5));
    -webkit-transform-origin: 0 0;
    transform(scale(0.5));
    transform-origin: 0 0;
}

缺点：

1. 占据了该元素的伪元素，代码量相对较多
2. input元素没有伪元素

其他

1. 7 种方法解决移动端 Retina 屏幕 1px 边框问题