[css] css的linear-gradient有什么作用呢？[css] css的linear-gradient有什么作用呢？个人简介主目录

[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);

个人简介

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

主目录

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

最后

以上就是光亮芹菜为你收集整理的[css] css的linear-gradient有什么作用呢？[css] css的linear-gradient有什么作用呢？个人简介主目录的全部内容，希望文章能够帮你解决[css] css的linear-gradient有什么作用呢？[css] css的linear-gradient有什么作用呢？个人简介主目录所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。