css怎么制作渐变

使用CSS制作渐变

CSS渐变可以创建平滑的颜色过渡效果，适用于背景、边框等元素。主要通过linear-gradient和radial-gradient实现。

线性渐变（linear-gradient）

线性渐变沿一条直线方向进行颜色过渡。基本语法如下：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

方向可以是角度（如45deg）或关键词（如to right）。颜色停止点定义渐变中颜色的位置。

示例代码：

div {
  background: linear-gradient(to right, red, yellow);
}

径向渐变（radial-gradient）

径向渐变从中心点向外辐射状渐变。基本语法：

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

形状可以是circle或ellipse，位置定义中心点坐标。

示例代码：

div {
  background: radial-gradient(circle at center, red, yellow);
}

重复渐变

使用repeating-linear-gradient或repeating-radial-gradient可以创建重复的渐变图案。

示例代码：

div {
  background: repeating-linear-gradient(45deg, red, red 10px, yellow 10px, yellow 20px);
}

浏览器兼容性

现代浏览器都支持CSS渐变。对于旧版浏览器，可以添加厂商前缀：

div {
  background: -webkit-linear-gradient(left, red, yellow);
  background: -moz-linear-gradient(left, red, yellow);
  background: linear-gradient(to right, red, yellow);
}

渐变方向控制

方向可以通过以下方式控制：

• 关键词：to top、to bottom、to left、to right
• 角度值：0deg（从下往上）、90deg（从左往右）
• 对角线：to top right、to bottom left等

多颜色渐变

可以在渐变中添加多个颜色停止点：

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

透明度渐变

使用rgba颜色值可以创建透明度渐变：

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