css背景渐变色linear-gradient函数简介与示例demo

1、默认使用

linear-gradient()：函数用于创建一个线性渐变的 “图像”。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果；还要定义终止色。

默认语法：background: linear-gradient(direction, color-stop1, color-stop2, …);
direction：方向或者角度，不设置时默认从上至下渐变；
color-stop1, color-stop2, …：用于指定渐变的起止颜色。

    .iconfont:hover{
      background: linear-gradient(#989eac, #454a5d)
    }
    
    .iconfont:hover{
      background: linear-gradient(#a0a3a5, #f7f8f7);
    }

2、改变渐变方向

默认为从上到下渐变，下面的为从左上到右下背景渐变写法

background: linear-gradient(to bottom right, #b1b6c0, #777c8d, #4e5367);

3、改变渐变角度

不设置角度时

background: linear-gradient(red, green, blue);

45度时

background: linear-gradient(45deg, red, green, blue);

90度时

background: linear-gradient(90deg, red, green, blue);