css3缩放功能实现0.5px的边框

Posted 2020-06-21

0.5px 的像素在移动端的要求还是需要的。

在网上找了一个具体的实现办法，核心就是css3的缩放功能。

 

加box-sizing:border-box；是为了边框可以一起缩放。

.border:after{
        content: "";
        position: absolute;
        border: 1px solid red;
        width: 200%;
        height: 200%;
        transform: 0 0;
        transform: scale(0.5,0.5);
        box-sizing: border-box;
    }