使用css边框添加四个角效果

466 阅读1分钟

效果如图

image.png

HTML

<div class="loginbody">
  <div class="border_corner border_corner_left_top"></div>
  <div class="border_corner border_corner_right_top"></div>
  <div class="border_corner border_corner_left_bottom"></div>
  <div class="border_corner border_corner_right_bottom"></div>
</div>

CSS

.loginbody{
    border: 1px solid #21a7e1;
    box-shadow: 5px 5px 10px 10px  rgba(24,68,124,0.4);
    padding-top:20px;
    border-radius: 6px;
    position: relative;
  }

  /*四个角框*/
  .border_corner{
    z-index: 2500;
    position: absolute;
    width: 19px;
    height: 19px;
    background: rgba(0,0,0,0);
    border: 4px solid #1fa5f1;
  }
  .border_corner_left_top{
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 6px;
  }
  .border_corner_right_top{
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 6px;
  }
  .border_corner_left_bottom{
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 6px;
  }
  .border_corner_right_bottom{
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 6px;
  }

注意:

1、外层的 class=" win" 必须设置 position:relative/absolute,因为4个角 position 是 absolute;

2、class="main" 设置边框,外层的class=" win" 不能设置,否则4个角会在里面;