CSS 函数 - linear-gradient()_CSS 菜鸟教程

CSS 函数 linear-gradient（） 在创建包含两种或多种颜色沿直线的渐进过渡的图像时很有用。生成的图像是<梯度>数据类型的特殊图像。

为了创建基本的线性渐变，您只需要两种颜色，它们被称为色标。您必须至少有两个，但也可以有两个以上。

概述

线性渐变没有固有尺寸，这意味着图像没有首选的大小或纵横比。
图像的大小将与它适用的元素的大小匹配。
<gradient>数据类型只能在使用 <image> 的地方使用。
linear-gradient（） 函数不能与 <color>数据类型和 background-color 等属性一起使用。
为了创建一个自我重复的线性渐变，你需要使用CSS函数 repeating-linear-gradient（）。

可能的值

函数 linear-gradient（） 可以将以下值作为参数：

<side-or-corner>:
- 确定梯度的起点。
- 包含单词 to 和最多两个关键术语，即一个表示水平侧（左侧或右侧），另一个表示垂直侧（顶部或底部）。
- 侧键术语的顺序可以是任何内容。
- 如果未指定任何值，则设置的默认值为 bottom。
- 顶部、底部、左侧和右侧的等效值分别为 0 度、180 度、270 度和 90 度。
- <angle> 值沿顺时针方向增加。
<linear-color-stop>：由色标的 <color> 值以及一个或两个可选的色标位置值组成。止损位置值可以是 <percentage> 或 <length> 值。
<color-hint>：确定相邻色标之间的渐变进程。如果未指定值，则颜色过渡的中点是两个色标之间的中点。

语法

<linear-gradient()> =	
	 linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

CSS linear-gradient（） - 组成

线性渐变是两种或多种颜色沿一条直线或轴的渐进过渡，即渐变线。两个或多个颜色停止点，逐渐显示颜色的过渡。参考下图，它显示了梯度线上的两个不同点，分别显示起点和终点，它们与梯度线相交。

起点是第一个色标的起点，终点是最后一种颜色的终点。起点和终点附近的角显示与这些点相同的颜色。

线性梯度合成

CSS linear-gradient（） - 基本示例

为了创建基本的线性渐变，您只需要两种颜色，它们被称为色标。您必须至少有两个，但也可以有两个以上。让我们看一个例子：

<html>
<head>
<style>
	 	div {
	 	 	 height: 100px;
	 	 	 width: 100px;
	 	}

	 	.basic-linear {
	 	 	 background: linear-gradient(red, yellow);
	 	}
</style>
</head>
<body>
	 	<h1>Basic linear gradient</h1>
	 	<div class="basic-linear"></div>
</body>
</html>

CSS linear-gradient（） - 右上角

可以创建渐变，使它们沿对角线从一个角延伸到另一个角。

例如，如果您希望渐变轴从左上角开始并转到右上角，则该函数应包含“to top right”作为参数。

<html>
<head>
<style>
	 	div {
	 	 	 height: 100px;
	 	 	 width: 100px;
	 	}

	 	.linear-diagonal {
	 	 	 background: linear-gradient(to top right, red, yellow);
	 	}
</style>
</head>
<body>
	 	<h1>direction to top right</h1>
	 	<div class="linear-diagonal"></div>
</body>
</html>

CSS linear-gradient（） - 角度值

还可以为梯度提供一个角度，用于定义方向。让我们看一个例子，其中提到了不同的角度：

<html>
<head>
<style>
	 	div {
	 	 	 height: 100px;
	 	 	 width: 100px;
	 	 	 display: inline-block;
	 	 	 text-align: center;
	 	 	 margin: 5px;
	 	}

	 	.linear-0deg {
	 	 	 background: linear-gradient(0deg, red, yellow);
	 	}

	 	.linear-45deg {
	 	 	 background: linear-gradient(45deg, red, yellow);
	 	}

	 	.linear-60deg {
	 	 	 background: linear-gradient(60deg, red, yellow);
	 	}

	 	.linear-90deg {
	 	 	 background: linear-gradient(90deg, red, yellow);
	 	}

	 	.linear-180deg {
	 	 	 background: linear-gradient(180deg, red, yellow);
	 	}

	 	.linear-minus90deg {
	 	 	 background: linear-gradient(-90deg, red, yellow);
	 	}
</style>
</head>
<body>
	 	<div class="linear-0deg">0deg</div>
	 	<div class="linear-45deg">45deg</div>
	 	<div class="linear-60deg">60deg</div>
	 	<div class="linear-90deg">90deg</div>
	 	<div class="linear-180deg">180deg</div>
	 	<div class="linear-minus90deg">-90deg</div>
</body>
</html>

CSS linear-gradient（） - 多色

创建渐变至少需要两种颜色，但在选择颜色数量时无需限制自己。默认情况下，颜色沿渐变均匀分布。让我们看一个例子：

<html>
<head>
<style>
	 	div {
	 	 	 height: 100px;
	 	 	 width: 100px;
	 	 	 display: inline-block;
	 	 	 text-align: center;
	 	 	 margin: 5px;
	 	}

	 	.linear-more-than-two {
	 	 	 background: linear-gradient(blue, magenta, red,yellow, orange);
	 	}
</style>
</head>
<body>
	 	<div class="linear-more-than-two"></div>
</body>
</html>

有关 linear-gradient（）的更多示例，请单击此处。

<< CSS 函数 - radial-gradient() CSS - 缓动函数 >>