2022-03-06 使用CSS3的伪元素选择器实现一个瞄准器效果框

实现需求

实现思路

• 给.panel元素的四边上四个折线框,是通过一个个宽高10px的小div只显示两侧边框实现的
• 上面两个可以直接给.panel添加伪元素选择器::before和::after
• 下面两个可以再给.panel套一个div.panel-footer,同样给这个元素添加两个伪元素选择器
• 设置定位:子绝父相

完整代码

html

<div class="panel">
    <div class="panel-footer"></div>
</div>

css

.panel {
    position: relative;
    height: 3.875rem;
    border: 1px solid rgba(25, 186, 136, .17);
    background-image: url("../images/line\(1\).png");
    padding: 0 .0625rem .5rem .0625rem;
    &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "1";
    }
    &::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "1";
    }
    .panel-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        &::before {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-left: 2px solid #02a6b5;
            border-bottom: 2px solid #02a6b5;
            content: "1";
        }
        &::after {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-right: 2px solid #02a6b5;
            border-bottom: 2px solid #02a6b5;
            content: "1";
        }
    }