子比主题美化 – 文章卡片三个点美化+代码区块圆点美化

  • 子比主题文章卡片美化,是在卡片代码内插入html代码配合css实现的,增加这三个点的代码,完全可以使用before来实现这个效果,于是就有了截图的效果。
    图片[1]-子比主题美化 – 文章卡片三个点美化+代码区块圆点美化 - 软壳源码网-软壳源码网

    css代码:

    .posts-item.card::before {
        content: "";
        display: block;
        background: #fc625d;
        top: 9px;
        left: 15px;
        border-radius: 50%;
        width: 9px;
        height: 9px;
        box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
        margin: 0px 2px -7px;
        z-index: 1000;
        position: absolute;
    }
    .posts-item.card {
        padding: 26px 10px 10px 10px;
    /*注意.posts-item.card没有定位属性 需要把这个注释去掉
        position: relative; /* 添加定位属性 */  
    
    }

    代码块:

    .enlighter::before {
        content: "";
        display: block;
        background: #fc625d;
        top: 9px;
        left: 15px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
        margin: 0px 2px -7px;
        z-index: 1;
        position: absolute;
    }
    .enlighter-overflow-scroll.enlighter-v-standard .enlighter {
        padding: 35px 0 12px 0;
    }
    版权声明 1 本网站名称:软壳源码网
    2 本站永久网址: https://www.ruankor.com/
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
    6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
    7如有侵权,请联系站长删除相关内容!
    © 版权声明
    THE END
    喜欢就记住本站,经常来逛逛吧
    点赞12 分享
    评论 抢沙发

    请登录后发表评论

      暂无评论内容