目录
前言目标：失败：准备解决方案：第一种：父级设置渐变色，子项设置阴影第二种：用伪类作为子元素第三种：用伪类作为父元素前言
🚀对于我们一些比较炫酷的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：linear-gradient(to left top, blue, red);
2.border-image
属性可以通过一些简单的规则，将一副图像划分为 9 个单独的部分，浏览器会自动使用相应的部分来替换边框的默认样式。
border-image 是 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 属性的简写
其中：
当然其也可以加入渐变色函数实现渐变的边框，但是值得注意的是一旦设置了border-image就无法在设置border-radius了
基本语法示例：border-image：linear-gradient(to left top, blue, red);// 只有上下两条边有颜色 左右没颜色border-image: linear-gradient(to left, rgba(255, 255, 255, 0), red 20%, green 80%, rgba(255, 255, 255, 0)) 1;
2.linear-gradient
linear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。
创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。
基本语法示例：linear-gradient(to left top, blue, red);linear-gradient(180deg, red 5%, blue 17%, green 93%); // 第一个参数代表方向，后面是🧍♂️各阶段的颜色
3.box-shadow
其可以为你的元素添加阴影
语法：box-shadow: h-shadow v-shadow blur spread color inset;
当设置第一个属性是inset的时候阴影就会向内
示例语法：box-shadow: inset 0 0 20px 0 red;
解决方案：
第一种：父级设置渐变色，子项设置阴影
🦕核心思路是：因为border-image不可以用，我们就用渐变色background的父亲代替边框，然后设置padding就是我们的border的宽度，父亲和子都设置一样的border-radius内部子元素再设置背景色和box-shadow,下面👇是代码：
模版：
<div class="map-tools "><div class="center-tools-box"></div></div>
.map-tools {box-sizing: border-box;width: 36px;height: 252px;padding: 2px;background: linear-gradient(180deg, #5e9de5 5%, #416ba1 17%, #416ba1 82%, #5e9de5 93%); border-radius: 20px;.center-tools-box {width: 100%;height: 100%;background: #12294f;border-radius: 20px;box-shadow: inset 0 0 20px 0 rgba(58, 166, 255, 0.6);}}
可以看到效果：完美！🥣👠
第二种：用伪类作为子元素
这样的方式🌧️与之前类似，只不过使用绝对定位的子元素盖在了我们的父元素之上，但是这样还是有一些弊端的，就是如果还想在内部写入元素的话需要将写入的元素盖在伪类之上，显然这样不太方便。
.map-tools {position: relative;width: 36px;height: 252px;background: linear-gradient(180deg, #5e9de5 5%, #416ba1 17%, #416ba1 82%, #5e9de5 93%);background-clip: padding-box;border: 2px solid rgba(255, 255, 255, 0);border-radius: 20px;transition: all 0.5s;}.map-tools::after {position: absolute;top: 2px;right: 2px;bottom: 2px;left: 2px;z-index: 1;content: "";background: #12294f;border-radius: 20px;box-shadow: inset 0 0 12px 0 rgba(58, 166, 255, 0.6);}
效果如下：
第三种：用伪类作为父元素
与上一种不同的是伪类变成了父元素，这就需要我们的基础元素设置边距，并且设置边距颜色为transparent也就是透明，让我们的伪类伪装成边框渐变色，并且基础元素要设置padding,给内部元素设置边距防止内部的元素遮挡住边框，效果也不错，而且这样就不用写两个元素了🍄
.map-tools {position: relative;box-sizing: border-box;width: 36px;height: 222px;padding: 2px; background: #12294f;background-clip: padding-box;border: 2px solid transparent;border-radius: 20px;box-shadow: inset 0 0 12px 3px rgba(58, 166, 255, 0.6);}.map-tools::after {position: absolute;top: -2px;right: -2px;bottom: -2px;left: -2px;z-index: -1;content: "";background: linear-gradient(180deg, #5e9de5 5%, #416ba1 17%, #416ba1 82%, #5e9de5 93%);border-radius: 20px;}
参考地址：
/cssref/css3-pr-box-shadow.html
