CSS——通过伪类来自定义四个角边框

前言

通过CSS伪类来定义正方形的四个角边框

内容

<template>
    <ul
        class="smart-energy flex"
        v-if="pageflag">
        <li>
            <div class="smart-energy-item">
                <div class="electricity">100</div>
                <div>昨日用电量 kwh</div>
            </div>
        </li>
        <li>
            <div class="smart-energy-item">
                <div class="electricity">100</div>
                <div>昨日用电量 kwh</div>
            </div>
        </li>
        <li>
            <div class="smart-energy-item">
                <div class="electricity">100</div>
                <div>昨日用电量 kwh</div>
            </div>
        </li>
    </ul>
</template>

<style lang="scss" scoped>
.smart-energy {
    li {
        flex: 1;
        .smart-energy-item {
            width: 140px;
            height: 90px;
            text-align: center;
            border: 2px solid #5be4e4;
            margin: 50px auto 30px;
            position: relative;

            &::after {
                content: '';
                width: calc(100% - 20px);
                height: 100%;
                position: absolute;
                left: 12px;
                top: -1px;
                bottom: -1px;
                border-bottom: 2px solid #0e393b;
                border-top: 2px solid #0e393b;
            }
            &::before {
                content: '';
                width: 100%;
                height: calc(100% - 20px);
                position: absolute;
                left: -1px;
                right: -1px;
                top: 12px;
                border-left: 2px solid #0e393b;
                border-right: 2px solid #0e393b;
            }
            
        }
    }
}
</style>