文本渐变 CSS

CSS样式经常被用于美化网页，其中，文本渐变样式是一种比较常见的用法，可以让你的页面更加美观。本文将介绍文本渐变 CSS 的用法，以及一些实例。

语法

文本渐变 CSS 的语法如下：

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

其中，direction 表示渐变的方向；color-stopX 表示渐变的颜色位置，可以有多个，用逗号隔开。例如：

background: linear-gradient(to bottom right, red, blue);

表示从左上角向右下角渐变，开始时是红色，渐变到蓝色。

渐变方向

渐变方向有以下几个选项：

• to top
• to bottom
• to left
• to right
• to top left
• to top right
• to bottom left
• to bottom right

其中，to 可以省略。例如：

background: linear-gradient(bottom, red, blue);

这个例子表示从下向上渐变，开始时是红色，渐变到蓝色。

多重颜色渐变

你可以在一个渐变中指定多个颜色，这样就可以实现多重颜色渐变效果。示例：

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

这个例子表示从左向右渐变，开始是红色，然后是橙色、黄色、绿色、蓝色、靛蓝色、紫罗兰色。

渐变角度

除了用方向表示渐变，你也可以用角度表示渐变。下面是一个使用角度的例子：

background: linear-gradient(45deg, red, blue);

这个例子表示从左下角向右上角渐变，开始是红色，渐变到蓝色。

示例代码：

.header {
  font-size: 72px;
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

效果：

总结

文本渐变 CSS 可以为你的网页增加美观程度，能够吸引用户的视线。文本渐变效果可以在各种网页上使用，例如标题、按钮等等。试着在你的网页中增加一些文本渐变效果吧！