超全面的解决0.5px边框问题

谁借莪１个温暖的怀抱￠ 2022-12-27 08:35 133阅读 0赞

## 单边框 ##

方法一：border + border-image + linear-gradient

.border { 
                width: 200px;
                height: 200px;
                background-color: red;
                margin: 0 auto;
                border-bottom: 1px solid transparent;
                border-image: linear-gradient(to bottom, transparent 50%, Green 50%) 0 0 100% 0;
            }

方法二：伪元素 + background-image

.border { 
                position: relative;
                width: 200px;
                height: 200px;
                background-color: red;
                margin: 0 auto;
            }
    
            .border::before { 
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background-image: linear-gradient(to bottom transparent 50%, blue 50%);
            }

方法三：定位 + 伪元素 + transfrom 缩放（scale）

.border { 
                position: relative;
                width: 200px;
                height: 200px;
                background-color: red;
                margin: 0 auto;
            }
    
            .border::after { 
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background: blue;
                transform: scaleY(0.5);
            }

## 多边框 ##

方法一：定位 + 伪元素 + transfrom 缩放（scale）

.border { 
                position: relative;
                width: 200px;
                height: 200px;
                background-color: red;
                margin: 0 auto;
            }
    
            .border::before { 
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 200%;
                height: 200%;
                border: 1px solid blue;
                transform: scale(0.5);
                transform-origin: 0 0;
            }