css特效2：流光边框

作为流光系列之一，流光边框和流光背景只有在::after上设置存在区别，所以本文中将不会有与流光背景相同的代码，如果您还没有看流光背景时怎么做的话，建议先看我前面的文章

css特效1：流光背景？我不允许你还不会_雪碧瓶子用一年的博客-CSDN博客https://blog.csdn.net/src_chao1/article/details/128319687?spm=1001.2014.3001.5501

好了，下面我们看一下效果图

正常状态：

鼠标移入 

 

鼠标按下 

 

 可以看到与之前流光背景的区别就在于按钮内部的颜色并不是流光效果，那是因为我们在按钮上又添加了伪元素::after，遮住了在::before中的流光效果。

代码部分

.streamerLightBorder::after {
    content: "";
    position: absolute;
    inset: 5px;
    background: #4e5b69;
    background-size: 400%;
    border-radius: 10px;
    filter: blur(10px);
}
.streamerLightBorder:active::after {
    background:  linear-gradient(to right, #f16443, #eeba45, #ef6297, #ec3636);
    background-size: 400%;
}

.streamerLightBorder选择器就是流光边框需要单独用到的代码,其中:acive是给按下鼠标后::after显示样式，再加上一篇的全部代码就会显示出流光边框的效果