css实现一个炫酷的渐变色边框

前言

🚀对于我们一些比较炫酷的ui设计我们经常会出现一些渐变色的样式，比如渐变色的背景，渐变色的边框，本文以一个ui设计稿展开，为大家带来常见的渐变色绘制方法，废话不多说直接上图🐛：

目标：

这是一个我们需要制作完成的渐变色的ui设计稿，我们使用的ui设计平台是mastergo平台，可以看到ui的稿件中的样式是这样的：

/* 图层 1 */
position: absolute;
left: 1452px;
top: 152px;
width: 36px;
height: 252px;
border-radius: 20px;
opacity: 1;
	
/* 自动布局 */
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
gap: 16px;
	
background: #12294F;
	
box-sizing: border-box;
border: 1px solid ;
border-image: linear-gradient(180deg, #5E9DE5 5%, #416BA1 17%, #416BA1 82%, #5E9DE5 93%) 1;
	
box-shadow: inset 0px 0px 20px 0px rgba(58, 166, 255, 0.6);

核心就是用渐变的边框border-image的linear-gradient渐变色配合🦋向内的box-shadow来实现内部的那种阴影效果。

失败：

于是我开开心心的将代码复制到了我的样式上，结果发生了惨案🚗，下面是我直接上代码的效果：

是哪里不对吗，🐸为什么这个border-raduis好像没有生效，后来查阅后发现原来是当设置了border-image后，border-raduis就会失效了，所以既然不能直接用ui搞的属性，那就只能寻找替代方案了，自己动手干吧😷

准备

了解border-image，background-image和linear-gradient属性。
1.background-image
该属性可以用于对一个快元素加入背景，可以是url包裹的人图片，也可以是渐变色，而且支持多个渐变色和多个图片一起叠加，空格分割即可。通常配合background-size和bakcground-repeat使用

基本语法示例：
background-image：lin