特效 css3 渐变背景框

.box{   子级
    position: relative;
    width: 300px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-content: center;
    background: #1B6D85;
}

.box::before{
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    background: white;
    z-index: -1;
}

.box::after{
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    background: white;
    z-index: -2;
    filter: blur(60px);
}

.box::before,
.box::after{
    background: linear-gradient(235deg,#89ff00,#1b6d85,#00bcd4);
}

.content{  父级
    color: white;
    padding: 20px;

}

原文地址：https://www.cnblogs.com/xiaozhang666/p/11376184.html