[css] css的linear-gradient有什么作用呢？



    概念：线性渐变,向下/向上/向左/向右/对角方向,为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

    demo

/* 从上到下 */
#grad {
  background: linear-gradient(red, blue); 
}
/* 从左到右 */
#grad {
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
/* 对角 */
#grad {
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
/* 使用角度 */
#grad {
  background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}

@censek
censek commented on 16 Mar 2020

        概念：线性渐变,向下/向上/向左/向右/对角方向,为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）
        demo

    /* 从上到下 */
    #grad {
      background: linear-gradient(red, blue); 
    }
    /* 从左到右 */
    #grad {
      background: linear-gradient(to right, red , blue); /* 标准的语法 */
    }
    /* 对角 */
    #grad {
      background: linear-gradient(to right, red , blue); /* 标准的语法 */
    }
    /* 使用角度 */
    #grad {
      background: linear-gradient(180deg, red, blue); /* 标准的语法 */
    }

对角渐变是：

background: linear-gradient(to bottom right, red, blue);

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题