上查看所有课程
CSS 渐变是两种或多种颜色之间的平滑过渡。它们用于装饰网页上的背景、边框和其他元素。
CSS 中有三种类型的渐变：
- 线性渐变
- 径向渐变
- 圆锥渐变
在本文中，我们将学习 linear-gradient 属性。
CSS 线性渐变
CSS linear-gradient() 函数在两种或多种颜色之间创建平滑的线性过渡。例如，
div {
height: 200px;
background: linear-gradient(orange, red);
}浏览器输出
在这里，linear-gradient 函数创建了从 orange 到 red 的平滑垂直过渡。
CSS linear-gradient 语法
linear-gradient() 函数的语法如下：
background-image: linear-gradient(direction, color1, color2, …);这里，
linear-gradient()：一个用于创建线性渐变的函数direction：设置线性渐变的方向color1：设置线性渐变中的第一种颜色color2：设置线性渐变中的第二种颜色
线性渐变的方向可以通过以下方式指定：
- 关键字
- 角度值
注意： 如果未指定渐变方向，则线性渐变默认从元素的顶部到底部流动。
带关键字的线性渐变
linear-gradient 属性的方向可以使用 left、right、bottom 和 top 关键字指定。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS linear-gradient</title>
</head>
<body>
<h2>linear-gradient(to bottom, orange, red)</h2>
<div class="box box1"></div>
<h2>linear-gradient(to top, orange, red)</h2>
<div class="box box2"></div>
<h2>linear-gradient(to right, orange, red)</h2>
<div class="box box3"></div>
<h2>linear-gradient(to left, orange, red)</h2>
<div class="box box4"></div>
</body>
</html>/* styles all divs */
div.box {
height: 100px;
border: 1px solid black;
margin-bottom: 20px;
}
/* default direction of linear-gradient */
div.box1 {
background-image: linear-gradient(to bottom, orange, red);
}
div.box2 {
/* gradient flows from bottom to top */
background-image: linear-gradient(to top, orange, red);
}
div.box3 {
/* gradient flows from left to right */
background-image: linear-gradient(to right, orange, red);
}
div.box4 {
/* gradient flows from right to left */
background-image: linear-gradient(to left, orange, red);
}浏览器输出
上面的例子说明了使用不同方向创建线性渐变。
我们需要在方向值前加上 to 关键字，否则函数将无法正常工作。
对角线方向的线性渐变
我们可以使用两个关键字值来为线性渐变提供对角线方向。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS linear-gradient</title>
</head>
<body>
<h2>linear-gradient(to bottom right, orange, red)</h2>
<div class="box box1"></div>
<h2>linear-gradient(to top left, orange, red)</h2>
<div class="box box2"></div>
<h2>linear-gradient(to top right, orange, red)</h2>
<div class="box box3"></div>
<h2>linear-gradient(to bottom left, orange, red)</h2>
<div class="box box4"></div>
</body>
</html>/* styles all divs */
div.box {
height: 100px;
border: 1px solid black;
margin-bottom: 20px;
}
div.box1 {
/* creates a linear-gradient that flows from top-left to bottom-right */
background-image: linear-gradient(to bottom right, orange, red);
}
div.box2 {
/* creates a linear gradient that flows from bottom-right to top-left */
background-image: linear-gradient(to top left, orange, red);
}
div.box3 {
/* creates a linear gradient that flows from bottom-left to top-right */
background-image: linear-gradient(to top right, orange, red);
}
div.box4 {
/* creates a linear gradient that flows from top-right to bottom-left */
background-image: linear-gradient(to bottom left, orange, red);
}浏览器输出
上面的例子说明了使用两个值作为方向来创建对角线方向的线性渐变。
带角度值的线性渐变
角度值提供了更大的灵活性和更强的控制力来指定渐变方向。
0deg 的值使渐变从底部到顶部流动，90deg 使渐变从左到右流动，180deg 使渐变从顶部到底部流动，270deg 使渐变从右到左流动。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS linear-gradient</title>
</head>
<body>
<h2>linear-gradient(0deg, orange, red)</h2>
<div class="box box1"></div>
<h2>linear-gradient(90deg, orange, red)</h2>
<div class="box box2"></div>
<h2>linear-gradient(180deg, orange, red)</h2>
<div class="box box3"></div>
<h2>linear-gradient(270deg, orange, red)</h2>
<div class="box box4"></div>
</body>
</html>/* styles all divs */
div.box {
height: 110px;
border: 1px solid black;
margin-bottom: 20px;
}
div.box1 {
/* flows bottom to top */
background-image: linear-gradient(0deg, orange, red);
}
div.box2 {
/* flows left to right */
background-image: linear-gradient(90deg, orange, red);
}
div.box3 {
/* flows top to bottom */
background-image: linear-gradient(180deg, orange, red);
}
div.box4 {
/* flows right to left */
background-image: linear-gradient(270deg, orange, red);
}浏览器输出
上面的例子说明了使用角度值来调整线性渐变的方向。
带多种颜色的线性渐变
linear-gradient() 函数可以接受逗号分隔的颜色值来创建多色线性渐变。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS linear-gradient</title>
</head>
<body>
<div>
<!-- Adding a linear gradient -->
</div>
</body>
</html>div {
height: 300px;
background-image: linear-gradient(red, blue, yellow);
}浏览器输出
上面的例子创建了一个具有 red、blue 和 yellow 颜色的线性渐变，渐变从 top 到 bottom（默认方向）流动。
重复线性渐变
repeating-linear-gradient() 函数通过重复线性渐变来创建图案。它至少需要两个颜色停位距离来创建重复效果。
颜色停位定义了渐变中颜色过渡开始的位置。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS repeating-linear-gradient</title>
</head>
<body>
<div>
<!-- Adding a repeating linear gradient -->
</div>
</body>
</html>div {
height: 300px;
/* creates a repeating linear gradient of red and blue color */
background: repeating-linear-gradient(to right, red 20%, blue 40%);
}浏览器输出
在上面的例子中：
background: repeating-linear-gradient(to right, red 20%, blue 40%);创建一个水平重复的渐变，该渐变在 red 和 blue 之间平滑过渡。
红色过渡从元素的 20% 宽度开始，蓝色过渡在 40% 处停止。最后，线性渐变在元素的宽度上重复该图案。
示例：CSS 重复线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS repeating-linear-gradient</title>
</head>
<body>
<div>
<!-- Adding a repeating linear gradient -->
</div>
</body>
</html>div {
border: 1px solid;
height: 300px;
background: repeating-linear-gradient(to right, black 0% 5%, white 5% 10%);
}浏览器输出
在上面的例子中：
background: repeating-linear-gradient(to right, black 0% 5%, white 5% 10%);创建一个具有 black 和 white 颜色的重复线性渐变，该渐变从 left 到 right 流动。
black 颜色从 0% 开始到 5% 结束，white 颜色从 5% 开始到 10% 结束。最后，图案重复，直到背景区域被覆盖。