css3实现边框线渐变

最新推荐文章于 2024-04-22 20:01:30 发布

吃葡萄不吐葡萄皮嘻嘻

最新推荐文章于 2024-04-22 20:01:30 发布

阅读量1.5k

点赞数

分类专栏： css3 文章标签： css3 前端

本文链接：https://blog.csdn.net/qq_45695853/article/details/124423847

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            position: relative;
            background: #000;
            margin: 100px auto;
            box-sizing: border-box;
        }
        .box::before,
        .box::after {
            transform: all .3s;
            position: absolute;
            content: "";
            top: -2px;
            right: -2px;
            bottom: -2px;
            left: -2px;
            background: linear-gradient(45deg,rgba(247, 7, 7, 0.8),rgb(231, 216, 4),rgb(0, 255, 0));
            z-index:-1;
            box-sizing: border-box;
            /* 可执行动画 */
            /* animation: run 10s infinite linear; */
        }
        @keyframes run {
            0%{
                background: linear-gradient(45deg,rgba(238, 41, 238, 0.8),transparent,rgb(0, 255, 0));
            }
            25%{
                background: linear-gradient(45deg,rgba(9, 243, 80, 0.8),transparent,rgb(34, 69, 224));
            }
            50%{
                background: linear-gradient(45deg,rgba(243, 122, 9, 0.8),transparent,rgb(241, 18, 18));
            }
            100%{
                background: linear-gradient(45deg,rgba(238, 41, 238, 0.8),transparent,rgb(0, 255, 0));
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

实现思路：
1.给需要添加边框的元素进行定位
2.通过给定位的元素添加伪元素::after ::before
3.通过改变伪元素的top,left,right,bottom值来实现边框

在这里插入图片描述
只保留下边框，只需将top,left,right都设置为0

       .box::before,
        .box::after {
            transform: all .3s;
            position: absolute;
            content: "";
            top: 0;
            right: 0;
            bottom: -2px;
            left: 0;
            background: linear-gradient(45deg,rgba(247, 7, 7, 0.8),rgb(231, 216, 4),rgb(0, 255, 0));
            z-index:-1;
            box-sizing: border-box;
        }

吃葡萄不吐葡萄皮嘻嘻

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3实现边框线渐变

<style> * { margin: 0; padding: 0; } .box { width: 200px; height: 200px; position: relative; background: #000; margin: 100px auto; ..
复制链接

扫一扫