如何实现0.5px边框.md

如何实现0.5px边框

1、border+border-image+linear-gradient的方式

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

2、伪元素+background-image的方式

<div class="border"></div>
.border {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 0 auto;
    position: relative;
}

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

3、定位+伪元素+transfrom缩放(scale)的方式

 <div class="border"></div>

 .border {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 0 auto;
    position: relative;
}