背景顏色

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

1、給盒子寬高
2、給盒子設(shè)置背景圖片 漸變顏色；默認(rèn)為垂直方向，也可通過改變角度，改變漸變的效果。

 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、給盒子設(shè)置背景圖片 漸變顏色
3、設(shè)置裁剪方式 從文本裁剪
4、設(shè)置字體顏色為透明

文字漸變.png

邊框漸變

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

1、設(shè)置兩個(gè)有嵌套關(guān)系的盒子
2、給大盒子設(shè)置寬高以及padding（padding的值就是需要漸變邊框的寬度）
3、給大盒子設(shè)置背景圖片 漸變顏色
4、給子元素設(shè)置寬高及背景顏色為白色；
5、如果需要圓角 必須兩個(gè)元素都加 border-radius。

邊框.png