css 颜色渐变

/* 线性渐变 */
.linear-gradient {
  background: linear-gradient(to right, red, yellow);
}

/* 径向渐变 */
.radial-gradient {
  background: radial-gradient(circle, red, yellow);
}

/* 角度渐变 */
.angle-gradient {
  background: linear-gradient(45deg, red, yellow);
}

/* 多颜色渐变 */
.multi-color-gradient {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

解释说明：

• 线性渐变：linear-gradient 用于创建沿着一个方向（如从左到右、从上到下）的颜色渐变。to right 表示从左到右的渐变，颜色从红色过渡到黄色。
• 径向渐变：radial-gradient 用于创建从一个点向外扩散的颜色渐变。circle 表示圆形渐变，颜色从红色过渡到黄色。
• 角度渐变：通过指定角度（如 45deg），可以控制渐变的方向。这个例子中，颜色从红色过渡到黄色，角度为 45 度。
• 多颜色渐变：可以在渐变中使用多个颜色，形成更复杂的渐变效果。这个例子中，颜色从红色逐渐过渡到紫色，经过橙色、黄色、绿色、蓝色和靛青色。