css制作渐变效果

线性渐变

使用 linear-gradient() 函数创建线性渐变效果。语法为 background: linear-gradient(direction, color-stop1, color-stop2, ...)。方向可以是角度（如 90deg）或关键词（如 to right）。

示例代码：

div {
  background: linear-gradient(to right, #ff9966, #ff5e62);
}

径向渐变

使用 radial-gradient() 函数创建圆形或椭圆形渐变。语法为 background: radial-gradient(shape size at position, color-stop1, color-stop2, ...)。

示例代码：

div {
  background: radial-gradient(circle at center, #ff9966, #ff5e62);
}

重复渐变

使用 repeating-linear-gradient() 或 repeating-radial-gradient() 创建重复渐变效果。适用于需要周期性渐变图案的场景。

示例代码：

div {
  background: repeating-linear-gradient(45deg, #ff9966, #ff5e62 10%);
}

渐变角度控制

通过角度值精确控制渐变方向。0deg 表示从下到上，90deg 表示从左到右。角度值增加按顺时针方向旋转。

示例代码：

div {
  background: linear-gradient(135deg, #ff9966, #ff5e62);
}

多色渐变

在渐变函数中添加多个颜色停止点创建复杂渐变效果。颜色停止点可以指定位置（百分比或绝对长度）。

示例代码：

div {
  background: linear-gradient(to right, red, yellow 20%, green 40%, blue);
}

渐变透明度

使用 rgba 颜色值或 transparent 关键词创建透明渐变效果。适用于叠加在其他背景上的半透明效果。

示例代码：

div {
  background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1));
}

渐变背景组合

可以组合多个渐变作为背景，用逗号分隔。最后列出的渐变会显示在最底层。

示例代码：

div {
  background: 
    linear-gradient(to bottom, transparent, rgba(0,0,0,0.5)),
    url('image.jpg');
}