linear-gradient 渐变详解

最新推荐文章于 2025-04-01 09:41:47 发布

青颜的天空

最新推荐文章于 2025-04-01 09:41:47 发布

阅读量1.7k

点赞数

分类专栏： CSS 文章标签： linear-gradient css3

本文链接：https://blog.csdn.net/a1056244734/article/details/114538899

版权

CSS 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何在Web开发中使用CSS的linear-gradient函数创建从上到下、定向、角度和组合颜色渐变。涵盖了浏览器支持、语法示例及关键参数的详细说明。

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

1.1 概述

https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient

语法: 可以使用角度或者关键字；

background: linear-gradient(color-stop1, color-stop2, …)
background: linear-gradient(direction, color-stop1, color-stop2, …)
background: linear-gradient(angle, color-stop1, color-stop2);

参数：

第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：to/top、bottom、left、right

第一个参数省略时，默认为“180deg”，等同于“to bottom”。

第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

1.2 浏览器支持

表格中的数字表示支持该函数的第一个浏览器版本号。

“webkit” 或 “moz” 或 “o” 指定的数字为支持该函数的第一个版本号前缀。

support

1.3示例

// 1、线性渐变默认是从上到下
.box1{
  background:linear-gradient(red,green);
  background:-webkit-linear-gradient(red,green);
}

// 2、从一个方向到另一个方向（to/left 、right 、bottom、top）
.box2 {
  background:linear-gradient(to left,red,green);
  background:-webkit-linear-gradient(to left,red,green);
}

// 3、对角的，两个方向可以进行组合，比如下面的就是从左上角到右下角
.box3 {
  background:linear-gradient(to left top,red,green);
  background:-webkit-linear-gradient(to left top,red,green);
}

// 4、还可以是角度
.box4 {
  background:linear-gradient(90deg,red,green);
  background:-webkit-linear-gradient(90deg,red,green);
}

在这里插入图片描述