CSS 容器背景 10 种颜色渐变Demo（linear-gradient()）

当我们使用 CSS 容器元素时，我们可以设置一种渐变背景色来改变样式。这种技术使用 linear-gradient() 函数来创建颜色渐变。接下来，我将为你提供一个完整的攻略来使用这个函数。

一、基本语法

linear-gradient() 函数的基本语法如下：

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

其中：

• direction：定义渐变的方向，可以是角度（deg）或方位（如 top、bottom、left、right 等）。
• color-stop：定义颜色渐变的位置及颜色。

下面是具体的语法规则：

• 如果 direction 是角度，则取值范围为 0deg 到 360deg，其中 0deg 表示从上往下，90deg 表示从左往右。
• 如果 direction 是方位，则可以取值为 top、bottom、left、right 等。
• color-stop 的格式如下：position color，其中 position 表示颜色的渐变位置，取值为数值或百分比（如 0、50%、100% 等），颜色可以是具体的颜色值，也可以是其他的渐变函数（如 rgba()、hsla()、color-stop() 等）。

二、几种常用的颜色渐变示例

1. 纵向渐变

下面是一个简单的纵向渐变示例，代码如下：

.container {
  background: linear-gradient(to bottom, #f0f, #00f);
}

这段代码表示从上到下渐变，颜色从 #f0f 到 #00f。

2. 横向渐变

我们也可以实现从左到右的过渡效果，代码如下：

.container {
  background: linear-gradient(to right, #f0f, #00f);
}

这段代码表示从左到右渐变，颜色从 #f0f 到 #00f。

三、总结

以上就是关于使用 linear-gradient() 创建颜色渐变的攻略。我们可以按照上述语法和示例进行自定义渐变背景。在使用渐变颜色时，一定要注意添加前缀以及检查浏览器兼容性，同时可以借助在线工具如 ColorZilla 等实现更为复杂的渐变效果。