css给div四角添加效果

给div四角添加效果

<template>
        <div class="border-show">
             <div class="border-container border-container-left-top"></div>
             <div class="border-container border-container-right-top"></div>
             <div class="border-container border-container-left-bottom"></div>
             <div class="border-container border-container-right-bottom"></div>
             <el-button type="primary">点击</el-button>
        </div>
</template>

.border-show{
        border: 1px solid #21a7e1;
        margin:50px 100px;
        border-radius: 3px;
        position: relative;
        width:300px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /*下面是给四个角框增加效果*/
.border-container{
        z-index: 2500;
        position: absolute;
        width: 12px;
        height: 12px;
        background: rgba(0,0,0,0);
        border: 3px solid #1fa5f1;
      }
.border-container-left-top{
        top: -2px;
        left: -2px;
        border-right: none;
        border-bottom: none;
        border-top-left-radius: 3px;
      }
.border-container-right-top{
        top: -2px;
        right: -2px;
        border-left: none;
        border-bottom: none;
        border-top-right-radius: 3px;
      }
.border-container-left-bottom{
        bottom: -2px;
        left: -2px;
        border-right: none;
        border-top: none;
        border-bottom-left-radius: 3px;
      }
.border-container-right-bottom{
        bottom: -2px;
        right: -2px;
        border-left: none;
        border-top: none;
        border-bottom-right-radius: 3px;
      }