css 手写边框角

background：使用linear-gradient 搭建四个角

background:
     linear-gradient(#000,#000) left top,
     linear-gradient(#000,#000) left top,
     linear-gradient(#000,#000) right top,
     linear-gradient(#000,#000) right top,
     linear-gradient(#000,#000) right bottom,
     linear-gradient(#000,#000) right bottom,
     linear-gradient(#000,#000) left bottom,
     linear-gradient(#000，#000) left bottom;
background-repeat:no-repeat;
background-size:5px 20px, 20px,5px;

border 配合 absolute 属性来进行四个边角的 搭建 再给四个角八个边 设置对应的长度宽度，定位等信息 在进行微调即可

<style>
    .t_line{
        position:absoult;
        background-color:#4788fb;
        box-shadow:0 0 10px #4788fb;
    }
    
    .l_t_line{
        width:5px;
        height:20px;
        left:-3px;
        top:-3px;
    }

 .t_l_line{
        width: 20px;
        height: 5px;
        background-color: #4788fb;
        left: -3px;
        top: -3px;
    }
    .r_t_line{
        width: 5px;
        height: 20px;
        background-color: #4788fb;
        right: 27px;
        top: -3px;
    }
    .t_r_line{
        width: 20px;
        height: 5px;
        background-color: #4788fb;
        right: 27px;
        top: -3px;
    }
    .l_b_line{
        width: 5px;
        height: 20px;
        background-color: #4788fb;
        left: -3px;
        bottom:18px;
    }
    .b_l_line{
        width: 20px;
        height: 5px;
        background-color: #4788fb;
        left: -3px;
        bottom: 18px;
    }

    .r_b_line{
        width: 5px;
        height: 20px;
        background-color: #4788fb;
        right: 27px;
        bottom: 18px;
    }
    .b_r_line{
        width: 20px;
        height: 5px;
        background-color: #4788fb;
        right: 27px;
        bottom: 18px;
    }
</style>  
              <div>
                <div class="t_line">
                    <i class="l_t_line"></i>
                    <i class="t_l_line"></i>
                </div>
                 <div class="t_line">
                    <i class="r_t_line"></i>
                    <i class="t_r_line"></i>
                </div>
                 <div class="t_line">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                 <div class="t_line">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
            </div>