css3实现边框线渐变

吃葡萄不吐葡萄皮嘻嘻

2024-06-16 帮助1人

学新通

 <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;
        }

这篇好文章是转载于：学新通技术网

css3实现边框线渐变

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

TikTok加速器哪个好免费的TK加速器推荐

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

微信运动停用后别人还能看到步数吗