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

前端OnTheRun

已于 2023-01-03 15:27:30 修改

阅读量130

点赞数

CC 4.0 BY-SA版权

分类专栏：项目与应用 css 文章标签： css3 css 伪元素选择器 before after

于 2022-03-06 20:46:03 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/123317033

项目与应用同时被 2 个专栏收录

76 篇文章

订阅专栏

css

14 篇文章

订阅专栏

本文详细介绍了如何使用CSS伪元素和定位属性为`.panel`元素创建四边折线框效果，包括使用`::before`和`::after`创建上、下边框，以及嵌套`.panel-footer`元素添加底部边框。通过示例代码展示了整个实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现需求

在这里插入图片描述

实现思路

给.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";
        }
    }