特效 css3 渐变背景框

Posted 2022-08-03 xiaozhang666

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