使用css实现4个角边框

2021-03-20

字数统计: 313字 | 阅读时长≈ 1分

目前发现2种实现方式，使用 css3 background 或者使用伪元素

css3 background实现

.rect {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background: linear-gradient(to left, #f00, #f00) left top no-repeat,
    linear-gradient(to bottom, #f00, #f00) left top no-repeat,
    linear-gradient(to left, #f00, #f00) right top no-repeat,
    linear-gradient(to bottom, #f00, #f00) right top no-repeat,
    linear-gradient(to left, #f00, #f00) left bottom no-repeat,
    linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
    linear-gradient(to left, #f00, #f00) right bottom no-repeat,
    linear-gradient(to left, #f00, #f00) right bottom no-repeat;
  background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
}

<div class="rect"></div>

伪元素实现

#border {
  width: 100px;
  height: 50px;
  position: relative;
}

#border:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  height: 25%;
  width: 25%;
  border-left: 1px solid black;
  border-top: 1px solid black;
}

#border:before {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  display: block;
  height: 25%;
  width: 25%;
  border-right: 1px solid black;
  border-top: 1px solid black;
}

#border2 {
  width: 100px;
  height: 50px;
  position: relative;
}

#border2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  display: block;
  height: 25%;
  width: 25%;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

#border2:before {
  position: absolute;
  bottom: 0;
  right: 0;
  content: '';
  display: block;
  height: 25%;
  width: 25%;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

<div id='border'></div>
<div id='border2'></div>

参考

div只有四个角有边框怎么实现？

本文作者： luckyship
本文链接： https://luckyship.github.io/2021/03/20/2021-03-20-four-angle-border-by-css/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！