CSS3 中的颜色渐变（Gradient）是一种强大的背景效果，允许你在两个或多个颜色之间平滑过渡。它无需使用图片即可创建丰富的视觉效果，常用于按钮、背景、遮罩等场景。
CSS3 支持两种主要类型的渐变：
一、线性渐变（Linear Gradient）
语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：指定渐变的方向，可以是角度（如 45deg）或关键词（如 to right, to bottom left 等）。
color-stop：颜色停止点，可以指定颜色和位置（如 red 20%）。
示例：
从上到下（默认）background: linear-gradient(red, blue);
从左到右 background: linear-gradient(to right, red, yellow);
对角线方向 background: linear-gradient(to bottom right, red, yellow);
使用角度 background: linear-gradient(135deg, red, yellow, green);
带颜色位置 background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
二、径向渐变（Radial Gradient）
语法：background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
shape：形状，circle（圆形）或 ellipse（椭圆，默认）。
size：大小关键字，如 closest-side, farthest-corner（默认）等。
position：中心点位置，默认为 center。
示例：
默认径向渐变（椭圆，居中）background: radial-gradient(red, yellow, green);
圆形渐变 background: radial-gradient(circle, red, yellow, green);
指定中心位置和大小 background: radial-gradient(circle at top right, red, yellow 70%, transparent);
重复径向渐变（见下文）
三、重复渐变（Repeating Gradients）
CSS3 还支持重复的线性和径向渐变：
1. 重复线性渐变：background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
2. 重复径向渐变：background: repeating-radial-gradient(circle, red, red 10px, blue 10px, blue 20px);
注意：颜色停止点需明确设置长度，否则可能无法形成重复图案。
四、浏览器兼容性
现代浏览器（Chrome、Firefox、Safari、Edge）都已良好支持 CSS 渐变。但若需兼容旧版浏览器（如 IE9 及以下），需使用图片回退方案或 polyfill。
建议加上厂商前缀以确保更广泛的兼容性（虽然现代开发中通常不再需要）：
background: -webkit-linear-gradient(left, red, blue); /* Safari 5.1–6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1–12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6–15 */
background: linear-gradient(to right, red, blue); /* 标准语法 */
五、实用技巧
渐变可与其他背景属性结合使用（如 background-size, background-repeat）。
可用于创建 透明渐变遮罩（例如文字渐变、图片淡出效果）：background: linear-gradient(to right, transparent, black);
渐变也可用于 border-image、mask-image 等高级用法。
六、完整示例
<div class="gradient-box"></div>
.gradient-box {
width: 300px;
height: 200px;
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
border-radius: 10px;
}