渐变 3 种颜色 - CSS

在 CSS 中，可以通过渐变来实现多个颜色之间的平滑过渡。

1. 线性渐变

线性渐变从一个点开始，在接下来的一段距离内平滑地过渡到另一个点。线性渐变可以沿着水平方向、垂直方向或任意角度进行。以下是一个沿着水平方向的线性渐变的例子：

background: linear-gradient(to right, #ff9933, #66ccff, #ff3399);

解释：

• linear-gradient 指定了要使用线性渐变。
• to right 指定渐变的方向为从左到右。
• #ff9933、#66ccff、#ff3399 分别表示要过渡的三个颜色。

效果如下：

2. 径向渐变

径向渐变从一个点开始，在以该点为中心的圆内平滑地过渡到另一个点。可以指定半径以及渐变颜色在圆内的分布方式。以下是一个以 50% 为半径的径向渐变的例子：

background: radial-gradient(circle at center, #ff9933, #66ccff, #ff3399);

解释：

• radial-gradient 指定了要使用径向渐变。
• circle at center 指定了要在屏幕中央创建一个圆。
• #ff9933、#66ccff、#ff3399 分别表示要过渡的三个颜色。

效果如下：

3. 重复渐变

重复渐变可以将一个渐变无限次地重复在一个区域内。以下是一个重复渐变的例子：

background: repeating-linear-gradient(to right, #ff9933, #66ccff, #ff3399);

解释：

• repeating-linear-gradient 指定了要使用重复线性渐变。
• to right 指定渐变的方向为从左到右。
• #ff9933、#66ccff、#ff3399 分别表示要过渡的三个颜色。

效果如下：

以上是 3 种常用的 CSS 渐变。通过渐变，我们可以轻松创建出漂亮的背景效果。