原文地址：https://segmentfault.com/a/1190000014785816

感想：邊框是偽元素::after來的；

HTML代碼：

<div class="box">
    you are my<br>
    FAVORIFE
</div>

CSS代碼：

html, body,.box {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
 
;
}
body{
    background: #222;
}
.box{
    width: 10em;
    height: 5em;
    border-radius: 0.2em;
    line-height: 1.5em;
    font-size: 2.5em;
    /* 字體系列：無襯線；*/
    font-family: sans-serif;
    color: white;
    background: #111;
    position: relative;
    animation: animate_text 2s linear infinite alternate
 
;
}
@keyframes animate_text{
    from{
        color: lime;
    }
    to{
        color: yellow;
    }
}
/* 用偽圓增加一個背板 */
.box::after{
    content: ‘‘;
    position: absolute;
    width: 102%;
    height: 104%;
    background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet)
 
;
    background-size: 300%;
    border-radius: 0.2em;
    z-index: -1;
    animation: animate_bg 5s infinite;
}
@keyframes animate_bg{
    0%{
        background-position: 0%, 50%;
    }
    50%{
        background-position: 100%, 50%;
    }
    100%{
        background-position: 0%, 50%;
    }
}

16.純 CSS 創作一個漸變色動畫邊框