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>
