CSS3渐变的背景色

2024-02-04 08:14:34

我们在开发的过程中经常会遇到背景色是渐变的背景色，一般可以制作背景图，如果仅仅是简单的线性变换的背景，今天我就遇到了，其实完全可以用CSS3的渐变来实现这个效果。这个过程由浏览器来生成，不用去加载静态的资源，提高性能。

渐变有两种：

线性渐变也是比较常见的渐变方式

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

基础的语法就是这样的：

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

默认的是从上到下的加入你不设置方向的话

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

从左到右

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

从左上角到右下角

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

还有一种是带有角度的自定义的渐变

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

当然还有多个颜色的渐变

#grad {
  /* 标准的语法 */
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

CSS3的渐变还支持带有透明度的写法

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

重复的线性变化（其实这个也有的地方用到）

#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

下面的是径向渐变

emmmmmmm我不用我也不想写，哈哈哈哈

就写一个基础的用法吧！！！

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

码农公寓