1. 线性渐变（Linear Gradient）：
线性渐变通过指定一个方向，从一个颜色过渡到另一个颜色。语法如下：
.linear-gradient {
background: linear-gradient(to right, #3498db, #2ecc71);
}
这个例子创建了一个从左到右的线性渐变，从 #3498db 到 #2ecc71。
2. 径向渐变（Radial Gradient）：
径向渐变通过指定一个起始中心和一个半径，从一个颜色过渡到另一个颜色。语法如下：
.radial-gradient {
background: radial-gradient(circle at center, #3498db, #2ecc71);
}
这个例子创建了一个以元素中心为中心的圆形径向渐变，从 #3498db 到 #2ecc71。
添加颜色断点：
你还可以在渐变中添加颜色断点，以控制颜色的过渡。例如：
.color-stop-gradient {
background: linear-gradient(to right, #3498db, #2ecc71, #e74c3c);
}
这个例子创建了一个从 #3498db 到 #2ecc71 再到 #e74c3c 的线性渐变。
使用角度指定方向：
对于线性渐变，你也可以使用角度来指定方向。例如：
.angle-gradient {
background: linear-gradient(45deg, #3498db, #2ecc71);
}
这个例子创建了一个 45 度的线性渐变，从 #3498db 到 #2ecc71。
这些渐变属性提供了强大的工具，可以在元素的背景中实现丰富的颜色过渡效果，用于提升页面的视觉吸引力。
转载请注明出处：http://www.zyzy.cn/article/detail/4059/CSS