css制作渐变

使用 CSS 线性渐变

线性渐变通过 linear-gradient() 函数实现，可以沿直线方向创建颜色过渡效果。语法结构如下：

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

direction 可以是角度（如 45deg）或方向关键词（如 to right）。color-stop 定义颜色及其位置（如 red 20%）。

示例代码：

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

使用 CSS 径向渐变

径向渐变通过 radial-gradient() 函数实现，从中心点向外扩散颜色过渡。语法结构如下：

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

shape 可以是 circle 或 ellipse，size 定义渐变范围（如 farthest-corner），position 设置中心点（如 at center）。

示例代码：

div {
  background: radial-gradient(circle at center, #3a7bd5, #00d2ff);
}

使用 CSS 锥形渐变

锥形渐变通过 conic-gradient() 函数实现，围绕中心点旋转颜色过渡。语法结构如下：

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

angle 设置起始角度（如 0deg），position 定义中心点（如 50% 50%）。

示例代码：

div {
  background: conic-gradient(from 0deg at 50% 50%, red, yellow, green);
}

控制渐变颜色分布

通过调整 color-stop 的位置参数可以精确控制颜色分布。例如：

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

重复渐变效果

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

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

浏览器兼容性处理

为兼容旧版浏览器，可以添加前缀或备用方案：

div {
  background: -webkit-linear-gradient(left, red, blue); /* Safari 5.1-6 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1-12 */
  background: linear-gradient(to right, red, blue); /* 标准语法 */
}