before和after伪类实现四角边框

---

<div class="mainbox">
    <!-- 伪元素绘制盒子上边角 -->
    <div class="panel">
        <!-- 图表放置盒子 -->
        <div class="chart"></div>
        <!-- 伪元素绘制盒子下边角 -->
        <div class="panel-footer"></div>
    </div>
</div>

.mainbox .panel {
    position: relative;
    height: 200px;
    width: 300px;
    background-color: #abcdef;
}

.mainbox .panel::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-left: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
    content: '';
}

.mainbox .panel::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
    content: '';
}

.mainbox .panel .panel-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.mainbox .panel .panel-footer::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-left: 2px solid #02a6b5;
    border-bottom: 2px solid #02a6b5;
    content: '';
}

.mainbox .panel .panel-footer::after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid #02a6b5;
    border-bottom: 2px solid #02a6b5;
    content: '';
}