current position:Home>CSS adds effect to the four corners of div

CSS adds effect to the four corners of div

2022-04-29 09:49:05Last night, the small building was Dongfeng again.

to div Four corners add effect

 Insert picture description here

<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"> Click on </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;
      }
      /* The following is to add effect to the four corner boxes */
.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;
      }

copyright notice
author[Last night, the small building was Dongfeng again.],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290704552553.html

Random recommended