css设置边框四角样式

最新推荐文章于 2024-08-26 13:58:59 发布

奔跑的痕迹

最新推荐文章于 2024-08-26 13:58:59 发布

阅读量4.6k

点赞数 2

本文链接：https://blog.csdn.net/qq_34817440/article/details/98629989

版权

vue 同时被 3 个专栏收录

56 篇文章 2 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

开发中使用css 伪类是再常见不过的事情了，运用好了能轻松实现许多复杂的样式，大大减少使用图片消耗带宽的问题，今天我们就使用伪类来实现登录框的四角样式

html代码如下

    <div class="form backLoginForm">
      <el-form :model="formData" ref="form">
			<!-- 添加自己的form 内容 -->
      </el-form>
      <div class="angle angle-left-top"></div>
      <div class="angle angle-left-bottom"></div>
      <div class="angle angle-right-top"></div>
      <div class="angle angle-right-bottom"></div>
    </div>

css 样式

  .angle {
    position: absolute;
    width: 20px;
    height: 20px;
  }

  .angle-left-top {
    top: 0;
    left: 0;
    border-left: 4px solid rgba(7,185,255,0.5);
    border-top: 4px solid rgba(7,185,255,0.5);
  }
  .angle-left-top:after{
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    top:-4px;
    right:0;
    border-left: 4px solid transparent;
    border-right: 4px solid rgb(28,32,122);
    border-bottom: 4px solid rgb(28,32,122);;
  }
  .angle-left-top:before{
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    bottom:0;
    left:-4px;
    border-top: 4px solid transparent;
    border-right: 4px solid rgb(28,32,122);
    border-bottom: 4px solid rgb(28,32,122);;
  }
  .angle-right-top {
    top: 0;
    right: -2px;
    border-right: 4px solid rgba(7,185,255,0.5);
    border-top: 4px solid rgba(7,185,255,0.5);
  }
  .angle-right-top:after{
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    bottom:0;
    right:-4px;
    border-right: 4px solid transparent;
    border-left: 4px solid rgb(28,32,122);
    border-bottom: 4px solid rgb(28,32,122);;
  }
  .angle-right-top:before{
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
   top:-4px;
    left:0;
    border-top: 4px solid transparent;
    border-left: 4px solid rgb(28,32,122);
    border-bottom: 4px solid rgb(28,32,122);;
  }

  .angle-left-bottom {
    bottom: 0;
    left: 0;
    border-bottom: 4px solid rgba(7,185,255,0.5);
    border-left: 4px solid rgba(7,185,255,0.5);
  }
  .angle-left-bottom:after{
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    bottom:-4px;
    right:0;
    border-left: 4px solid transparent;
    border-top: 4px solid rgb(28,32,122);
    border-right: 4px solid rgb(28,32,122);;
  }
  .angle-left-bottom:before{
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    top:0;
    left:-4px;
    border-left: 4px solid transparent;
    border-top: 4px solid rgb(28,32,122);
    border-right: 4px solid rgb(28,32,122);;
  }

  .angle-right-bottom {
    bottom: 0;
    right: -2px;
    border-right: 4px solid rgba(7,185,255,0.5);
    border-bottom: 4px solid rgba(7,185,255,0.5);
  }

  .angle-right-bottom:after{
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    bottom:-4px;
    left:0;
    border-right: 4px solid transparent;
    border-top: 4px solid rgb(28,32,122);
    border-left: 4px solid rgb(28,32,122);;
  }
  .angle-right-bottom:before{
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    top:0;
    right:-4px;
    border-right: 4px solid transparent;
    border-top: 4px solid rgb(28,32,122);
    border-left: 4px solid rgb(28,32,122);;
  }