字体、背景颜色和边框的颜色渐变

背景颜色

  .content {
        width: 200px;
        height: 200px;
        background-image: linear-gradient(chartreuse, purple);
    }

1、给盒子宽高
2、给盒子设置背景图片 渐变颜色；默认为垂直方向，也可通过改变角度，改变渐变的效果。

 background-image: linear-gradient(45deg, chartreuse, purple);

背景颜色.png

文字渐变

.text-linear {
      width: 200px;
      height: 200px;
      line-height: 200px;
      background-image: linear-gradient(45deg,blue,green);
      -webkit-background-clip: text;
      color: transparent;
      font-size: 50px;
      font-weight: bold;
  }

1、给盒子宽高
2、给盒子设置背景图片 渐变颜色
3、设置裁剪方式 从文本裁剪
4、设置字体颜色为透明

文字渐变.png

边框渐变

.box-linear {
      width: 200px;
      height: 200px;
      padding: 5px;
      background-image: linear-gradient(red,purple);
      .box-1 {
          width: 200px;
          height: 200px;
          background: #fff;
      }
}

1、设置两个有嵌套关系的盒子
2、给大盒子设置宽高以及padding（padding的值就是需要渐变边框的宽度）
3、给大盒子设置背景图片 渐变颜色
4、给子元素设置宽高及背景颜色为白色；
5、如果需要圆角 必须两个元素都加 border-radius。

边框.png