CSS技巧（一）——before、after

1实现带三角边框

效果

右

左

上

下

实现代码

<div class="cssTest-right"></div>
<div class="cssTest-left"></div>
<div class="cssTest-top"></div>
<div class="cssTest-bottom"></div>

.mainbox .panel {
  position: relative;
  height: 3.875rem;
  padding: 0 0.1875rem 0.5rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../images/line.png) rgba(225, 225, 225, 0.03);
  margin-bottom: 0.1875rem;
}
.mainbox .panel::before {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel::after {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel .panel-footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
}
.mainbox .panel .panel-footer::before {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel .panel-footer::after {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}

2 before和after伪类实现四角边框

TML+CSS

利用伪类制作边框

div class="colume">
  <div class="panel bar">
    <h2>柱形图</h2>
    <div class="chart"></div>
    <div class="panel-footer"></div>
  </div>
</div>

.mainbox .panel {
  position: relative;
  height: 3.875rem;
  padding: 0 0.1875rem 0.5rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../images/line.png) rgba(225, 225, 225, 0.03);
  margin-bottom: 0.1875rem;
}
.mainbox .panel::before {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel::after {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel .panel-footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
}
.mainbox .panel .panel-footer::before {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel .panel-footer::after {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}

方法2

       <div class="global_echarts_box">
            <p class="global_biaoti2">监管系统标题1</p>
       </div>

 global_echarts_box {
    position: absolute;
    width: 23%;
    height: 70%;
    top: 20vh;
    right: 4vh;
    // csss实现四角边框
 box-shadow: 0 0 20px #1f69b9b9 inset;
  background: linear-gradient(#33cdfa, #33cdfa) left top,
  linear-gradient(#33cdfa, #33cdfa) left top,
  linear-gradient(#33cdfa, #33cdfa) right top,
  linear-gradient(#33cdfa, #33cdfa) right top,
  linear-gradient(#33cdfa, #33cdfa) left bottom,
  linear-gradient(#33cdfa, #33cdfa) left bottom,
  linear-gradient(#33cdfa, #33cdfa) right bottom,
  linear-gradient(#33cdfa, #33cdfa) right bottom;
  background-repeat: no-repeat;
  background-size: 2px 12px, 12px 2px;
}