CSS 数据类型 - gradient_CSS 菜鸟教程

CSS 数据类型 <gradient> 是一种独特的 <image> ，它表示两种或多种颜色之间的渐进过渡。

渐变没有固有维度，这意味着它既没有自然大小或首选大小，也没有首选比率。渐变的大小将与它所应用到的元素的大小相匹配。

可能的值

CSS 数据类型 <gradient> 使用以下函数之一作为值进行定义：

linear-gradient（）：沿直线在两种或多种颜色之间渐进过渡。使用 linear-gradient（） 函数生成。
radial-gradient（）：从中心点（原点）开始，两种或多种颜色之间的渐进过渡。使用 radial-gradient（） 函数生成。
conic-gradient（）：围绕圆圈的两种或多种颜色之间的渐进过渡。使用 conic-gradient（） 函数生成。
repeating-linear-gradient（）：重复填充空间的线性渐变。使用 repeating-linear-gradient（） 函数生成。
repeating-radial-gradient（）： 重复填充空间的径向渐变。使用 repeating-radial-gradient（） 函数生成。

语法

<gradient> = <linear-gradient()>|<repeating-linear-gradient()>|<radial-gradient()>|<repeating-radial-gradient()>

CSS <gradient> - 线性渐变

以下示例演示了 linear-gradient 的用法：

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

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

CSS <gradient> - 径向渐变

以下示例演示了 radial-gradient 的用法：

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

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

CSS <gradient> - 圆锥渐变

下面的示例演示了 conic-gradient（）的用法：

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

	 	.basic-conic-gradient {
	 	 	 background: conic-gradient(red, yellow);
	 	 	 border-radius: 50%;
	 	}
</style>
</head>
<body>
	 	<h1>Basic Conic Gradient</h1>
	 	<div class="basic-conic-gradient"></div>
</body>
</html>

CSS <gradient> - 重复线性渐变

以下示例演示了 repeating-linear-gradient 的用法：

<html>
<head>
<style>
	 	div {
	 	 	 height: 200px;
	 	 	 width: 400px;
	 	}
	 	/* A repeating gradient tilted 60 degrees,
	 	with three color stops */
	 	.repeat-linear {
	 	 	 background-image: repeating-linear-gradient(60deg, red, yellow 7%, black 10%);
	 	}
</style>
</head>
<body>
	 	<h1>Repeating linear gradient</h1>
	 	<div class="repeat-linear"></div>
</body>
</html>

CSS <gradient> - 重复径向渐变

以下示例演示了 repeating-radial-gradient 的用法：

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

	 	.repeat-radial {
	 	 	 background: repeating-radial-gradient(
	 	 	 ellipse farthest-side at 20% 20%,
	 	 	 red,
	 	 	 black 5%,
	 	 	 yellow 5%,
	 	 	 blue 10%
	 	 	 );
	 	background: repeating-radial-gradient(
	 	 	 ellipse farthest-side at 20% 20%,
	 	 	 red 0 5%,
	 	 	 yellow 5% 10%
	 	 	 );
	 	}
</style>
</head>
<body>
	 	<h1>Repeating radial gradient</h1>
	 	<div class="repeat-radial"></div>
</body>
</html>

<< CSS - block-size 属性 CSS - scroll-padding-inline-start >>