[分享]css3左右颜色渐变

CSS3提供了多种渐变方式，其中就包括了左右颜色渐变。让我们来看一个例子：

.box {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, red, yellow);
} 

我们将一个元素的宽度设置为300px，高度设置为200px。然后使用了线性渐变函数，其中to right表示从左到右渐变，red和yellow是我们要使用的两种颜色。

这样我们就能得到如下渐变效果：

如果我们要设置更多的颜色，可以使用逗号分隔，如下所示：

.box {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, red, yellow, green, blue);
} 

这样就会得到一个四色渐变的效果：

除了直接使用颜色外，我们还可以使用CSS3定义的一些颜色函数，比如rgba()、hsla()等。

如果要调整渐变的方向，可以使用to left、to top、to bottom等参数。

总之，CSS3提供的渐变功能极其强大，让我们可以轻松实现各种炫酷效果。