css实现四角边框

实现效果

css实现四角边框_第1张图片

代码如下

html

css

.loginbody {
  position: relative;
  padding: 5px;
  border: 1px solid transparent;
}

/*四个角框*/
.border_corner {
  z-index: 2500;
  position: absolute;
  width: 15px;
  height: 15px !important;
  background: rgba(0, 0, 0, 0);
  border: 2px solid rgba(24, 254, 254, 1);
}
.border_corner_left_top {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}
.border_corner_right_top {
  top: -1px;
  right: -2px;
  border-left: none;
  border-bottom: none;
}
.border_corner_left_bottom {
  bottom: -2px;
  left: -1px;
  border-right: none;
  border-top: none;
}
.border_corner_right_bottom {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
}

你可能感兴趣的:(css,css,前端,html)