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;
    }
複製程式碼