css制作渐变

线性渐变

使用linear-gradient()函数创建线性渐变效果。语法为：

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

方向可以是角度（如90deg）或关键词（如to right）。示例：

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

径向渐变

通过radial-gradient()实现从中心向外扩散的渐变：

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

示例创建一个圆形渐变：

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

重复渐变

使用repeating-linear-gradient或repeating-radial-gradient创建重复图案：

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

颜色停点控制

在渐变函数中精确指定颜色过渡位置：

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

浏览器前缀

为确保兼容性，可添加供应商前缀：

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

透明度渐变

结合RGBA颜色实现透明效果：

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

多背景层叠加

通过多个背景层创建复杂效果：

div {
  background: 
    linear-gradient(to bottom, transparent, black),
    url(image.jpg);
}