css 背景颜色渐变

/* CSS 背景颜色渐变示例 */

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

/* 解释：这行代码将背景颜色从左到右由红色逐渐变为黄色。'to right' 表示渐变的方向是从左到右。 */

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

/* 解释：这行代码创建了一个径向渐变，从中心向外扩展，颜色从红色逐渐变为黄色。'circle' 表示渐变的形状为圆形。 */

/* 多色线性渐变 */
.element {
  background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
}

/* 解释：这行代码创建了一个从上到下的多色线性渐变，包含了彩虹的七种颜色。 */

/* 带有透明度的渐变 */
.element {
  background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(255, 255, 0, 0.5));
}

/* 解释：这行代码创建了一个带有透明度的渐变，颜色从半透明的红色变为半透明的黄色。'rgba' 函数用于设置颜色和透明度。 */