移动端一像素线实现方法

方法一：C3缩放

1. 设置目标元素作为定位参照：

.box {
    /* 只要不是默认值static即可 */
    position : relative;  
}

2. 给目标元素添加一个伪元素before或者after，并设置绝对定位

.box : before { 
    content : '' ; 
    position : absolute ; 
}

3. 给伪元素添上1px的边框

border: 1px solid red;

4. 设置伪元素的宽高为目标元素的2倍

width : 200% ;
height : 200% ;

5. 将伪元素缩小0.5倍（变回目标元素的大小）

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

6. 在伪元素中把border包进来

box-sizing: border-box;

• 简言之就是先放大再缩回来，border-box是关键，否则边框不会一起缩放

用背景图来实现

• 此方法需要UI小姐姐支持

通过伪元素的另一种实现方式

1. 目标元素加上定位和宽高

.box {
    /* 只要不是默认值static即可 */
    position : relative;  
    width : 50px ;
    height : 50px ;
}

2. 给目标元素添加一个伪元素before和after

.box : before { 
    content : '' ; 
    position : absolute ; 
    border : solid 1px red ;
    top : -50% ;
    left : -50% ;
    right : -50% ;
    bottom : -50% ;
}

3. 将伪元素缩小0.5倍（变回目标元素的大小）

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

4. 在伪元素中把border包进来

box-sizing: border-box;