CSS渐变是一种在不同颜色之间平滑过渡的效果，常用于背景和文本颜色的变化。CSS提供了两种类型的渐变：线性渐变和径向渐变。线性渐变是沿着一条直线的渐变，而径向渐变是从一个圆形区域向外扩散的渐变。CSS渐变可以使用CSS属性background-image和background来创建。
以下是一个使用CSS线性渐变的HTML页面示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Linear Gradient Example</title>
<style>
/* 线性渐变 */
#linear-gradient {
background: linear-gradient(to bottom, #ff0000, #0000ff);
height: 200px;
}
</style>
</head>
<body>
<div id="linear-gradient"></div>
</body>
</html>上面的代码使用了CSS属性background和linear-gradient来创建一个从红色到蓝色的线性渐变背景。to bottom指定了渐变的方向，表示从上往下渐变。#ff0000和#0000ff是起始颜色和结束颜色。下面是一个使用CSS径向渐变的HTML页面示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Radial Gradient Example</title>
<style>
/* 径向渐变 */
#radial-gradient {
background: radial-gradient(circle, #ff0000, #0000ff);
height: 200px;
}
</style>
</head>
<body>
<div id="radial-gradient"></div>
</body>
</html>上面的代码使用了CSS属性background和radial-gradient来创建一个从红色到蓝色的径向渐变背景。circle表示渐变的形状是圆形，如果使用ellipse表示椭圆形。#ff0000和#0000ff是起始颜色和结束颜色。
正文完