1. 线性渐变（Linear Gradient）：
使用角度定义渐变方向：
.linear-gradient {
background: linear-gradient(45deg, #ff7e5f, #feb47b);
/* 从左上到右下的对角线渐变，起始颜色#ff7e5f，结束颜色#feb47b */
}
使用关键字定义渐变方向：
.linear-gradient {
background: linear-gradient(to right, #ff7e5f, #feb47b);
/* 从左到右的水平渐变，起始颜色#ff7e5f，结束颜色#feb47b */
}
2. 径向渐变（Radial Gradient）：
使用关键字定义渐变位置：
.radial-gradient {
background: radial-gradient(circle at center, #ff7e5f, #feb47b);
/* 从中心向外的圆形径向渐变，起始颜色#ff7e5f，结束颜色#feb47b */
}
使用百分比定义渐变位置：
.radial-gradient {
background: radial-gradient(circle at 50% 50%, #ff7e5f, #feb47b);
/* 从中心向外的圆形径向渐变，起始颜色#ff7e5f，结束颜色#feb47b */
}
3. 多色停止的渐变：
.multi-stop-gradient {
background: linear-gradient(to right, #ff7e5f, #feb47b, #8be5f5);
/* 从左到右的水平渐变，包含三个颜色停止点 */
}
4. 重复渐变：
.repeating-gradient {
background: repeating-linear-gradient(45deg, #ff7e5f, #ff7e5f 10px, #feb47b 10px, #feb47b 20px);
/* 45度方向的线性渐变，重复#ff7e5f和#feb47b的颜色，每20px为一个循环 */
}
这些是一些常见的CSS3渐变应用方法和实例。根据具体的设计需求，你可以调整颜色、方向、位置等参数，创建出更多样式丰富的渐变效果。这些渐变应用在背景、边框等元素上，能够为网页带来更加炫丽的视觉效果。
转载请注明出处：http://www.zyzy.cn/article/detail/4076/CSS