CSS 0.5像素线

在移动端1像素的线是很丑的,而border-width设置为0.5px会被自动转成1px;
border-width只能为自然数;类似的属性也不可以设置0.5;
可以用伪元素+缩放来实现;

box{
    position:relative;    //先给元素设置定位,除了static都可以
}
.box1::before{
    content: '';    //追加一个空
    position: absolute;    //设置定位
    top: 0;  //如果不设置可能会出现偏移
    left: 0;  
    border: 1px solid #000;    //设置边框
    width: 200%;    //设置为插入元素的两倍宽高
    height: 200%;
    transform-origin: 0 0;    //设置元素的基点为0 0
    transform: scale(0.5,0.5);    //宽高缩小一半
    box-sizing: border-box;    //设置盒模型 这一步必须要有,否则边框不会随着一起缩放
    }

大概思路:想元素放大2倍但是1像素的边框仍是1像素,然后再缩放时,边框随着一起缩放一半,就形成0.5像素边框