1px 边框的实现方法

方法1： 使用svg(不适合有圆角的边框) （假设你已经使用webpack postcss） 需要安装postcss插件 postcss-write-svg

    @svg 1px-border{
        width: 5px;
        height: 5px;
        @rect{
            fill:transparent;
            width: 100%;
            height: 100%;
            stroke-width: 1;
            stroke: var(--color, black);
        }
    }
    .test{
        width: 100px;
        height: 100px;
        border: 1px solid green;
        border-image: svg(1px-border param(--color green)) 2 repeat;
    }

方法2：伪类 + transform 实现

一边的情况：

    .scale-1px{
        position: relative;
        border:none;
    }
    .scale-1px:after{
        content: '';
        position: absolute;
        bottom: 0;
        background: #000;
        width: 100%;
        border: 1px solid red;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

4条边的情况：

    .scale-1px{
        position: relative;
        border:none;
    }
    .scale-1px:after{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        background: transparent;
        width: 200%;
        height: 200%;
        border: 1px solid red;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }