如何设置CSS渐变色，边框线渐变，背景色渐变，文字渐变

边框线渐变

1.先把要展示的边框设置成透明色
2. 再添加border-image属性

 border: 1px transparent solid;
 border-image: linear-gradient(to right, #a02685, #23b7cb) 1 10;

注：linear-gradient(线性渐变)
*第一个参数为渐变的方向，可以是角度（如45deg）或方向关键字(top, right等)
*从第二个参数开始是一个颜色集合, 表示起始点到结束点之间的渐变颜色;每个颜色可以加入百分比表示颜色开始位置，如：background-image: linear-gradient( 0deg, blue, green 40%, red );

背景色渐变

.demo-01 {
  background: linear-gradient(135deg, #ca317d 30%, #dbdee2 100%);
}
.demo-02 {
  background: radial-gradient(30% 30%,#0a0a0a 0,rgba(238, 3, 15, 0.932) 100%);
  //径向渐变
}
.demo-03 {
  background:-webkit-repeating-radial-gradient(circle contain,#f00,#ff0 10%,#f00 15%);
  border-radius: 50%; 
  //重复渐变（里面的参数有时间可以慢慢试，就不做解释了）
}

文字渐变

  //初始颜色
  color: #f35626;
  //渐变颜色
  background-image: linear-gradient(92deg, #f32626 0%, #492b9b 100%);
  //填充文字
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

如果需要动态变化的颜色，可以定义一个动画

animation: hue 2s infinite linear;
  @keyframes hue {
    from {
      filter: hue-rotate(0deg);
    }

    to {
      filter: hue-rotate(-360deg);
    }
  }

------------------------------------------------------------------以上，如果觉得有用就点个赞吧(* ^ ▽ ^ * )