实现效果

边框变化.gif 是不是感觉十分的炫酷，那么接下来你就要仔细看我的解析了

代码块奉上

图片代码我放在注释里，小伙伴们可以自主选择。

实现过程

框架搭好

第一步咱们先搭一个框架，先将他布局好。不然样式再好看也没用

 <div class="box"> <div class="button">
       /* <img src="../A1/image/a2.jpg"   >*/
        </div></div>

至于如何将它居中，我依然选择目前流行的弹性布局；建议小伙伴们也可以去学习一下，

 display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        align-items: center;

注意height: 100vh一定要写，不然他会产生高度不够或太大，是你的页面分成，或有滚动的效果出现，破坏页面美感。就像这样

屏幕截图 2022-09-25 141059.png 是不是有一条分界线，破坏了整体的效果。

美化样式

今天的主角来了

border-image css属性是允许在元素的边框上绘制图像，如果你使用他的话，他将会代替border-style。他共有5个初始值，分别是

border-image-source(你所引入的东西)，
borser-image-slice(图片裁剪位置），
borser-image-width（宽度）
borser-image-outset(是否超出边框）
borser-image-repeat是否平铺。而我们使用 border-image-source，borser-image-width就可以实现我们想要的效果了

 border-image: linear-gradient(45deg, gold, deeppink,rgb(31, 218, 59)) 1;

对了，还有一定要注意border-image要写在border后面，不然浏览器会显示不出。

rder: 5px solid;//border-style可以写也可以不写，
    border-image: linear-gradient(45deg, gold, deeppink,rgb(31, 218, 59)) 1;

至于边框围绕图片转要用clip-path属性，这在我前一篇文章内有介绍，小伙伴们有兴趣可以去查看一下，玩一下。

第二个主角

这一个玩法，其实我在流光按钮中就有所介绍，但这次有所不同。

 background: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#178d73,#8a8928);
        background-size: 500%;
        animation: mo 2s infinite;
        
        
@keyframes mo{
        0%{
            background-position: 0% 50%;
        }
        50%{
            background-position: 100% 50%;
        }
       100%{
            background-position: 0% 50%;
        }
    }

小伙伴们有记住动画里面的这几个值，我感觉这样搭配效果最好。background-position这个属性功能也挺好的，还可以用它来实现跑马灯效果。

结束语

希望这次的分享对小伙伴们有所帮助,大家快去尝试一下吧，毕竟学计算机要多加练习。不然就形成了学了后面又忘了前面的局面。

css实现boder-image效果