CSS之linear-gradient( ) 函数—背景颜色渐变设计

最新推荐文章于 2025-06-02 09:30:00 发布

turbo夏日漱石

最新推荐文章于 2025-06-02 09:30:00 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端项目过程中的问题文章标签： css 前端

本文链接：https://blog.csdn.net/qq_62799214/article/details/133561523

前端同时被 2 个专栏收录

47 篇文章

订阅专栏

项目过程中的问题

33 篇文章

订阅专栏

本文介绍了CSSlinear-gradient()函数，包括其用于创建线性渐变的基本概念、语法，以及如何设置方向和颜色停止点。通过实例展示了从不同方向和颜色组合创建渐变的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

linear-gradient( ) 函数

linear-gradient( ) 函数

简介：

linear-gradient 函数是 CSS 中用于创建线性渐变的函数。它接受一个或多个参数，并使用这些参数创建一个渐变。

语法：
linear-gradient(direction, color-stop1, [color-stop2], ...)
详解：

direction 是一个可选的参数，指定渐变的方向。可以是 to top、to right、to bottom 或 to left。默认值为 to bottom。
color-stop 是一个可选的参数，指定渐变中每个颜色的位置和颜色值。它由两个值组成，第一个值是颜色值，第二个值是颜色的位置（可以是百分比值或关键字）。

例如：

①以下代码创建了一个从上到下的线性渐变：
background-image: linear-gradient(to bottom, red, blue);
这将创建一个从红色到蓝色的渐变，渐变方向为从上到下。

②以下代码创建了一个从左到右的线性渐变，并指定了每个颜色的位置和颜色值：
background-image: linear-gradient(to right, yellow  0%, green 50%, blue 100%);
这将创建一个从黄色到绿色到蓝色的渐变，渐变方向为从左到右。第一个颜色值为黄色，位置为 0%；第二个颜色值为绿色，位置为 50%；第三个颜色值为蓝色，位置为 100%。

③linear-gradient 函数还支持多个颜色值。例如：
background-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
这将创建一个从红色到橙色到黄色到绿色到蓝色到靛蓝色到紫色的渐变，渐变方向为从上到下。