css 文字 左右多种颜色渐变

CSS 文字的左右颜色渐变可以通过伪元素 `::before` 和 `::after` 实现，结合 `background-image` 和 `linear-gradient` 来完成。首先，你需要给需要添加渐变的文字元素设置一个包含两个颜色的颜色值，然后创建一个背景图，从左到右或者反过来应用渐变。

例如，如果你想让一段文字的左边是红色，右边是蓝色，你可以这样做：

.your-text-class {
  position: relative;
  color: transparent; /* 为了透过背景看到文字 */
}

.your-text-class::before,
.your-text-class::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 或者调整为适应文字的高度 */
}

.your-text-class::before {
  background: linear-gradient(to right, red, transparent);
}

.your-text-class::after {
  background: linear-gradient(to left, blue, transparent);
}

在这个例子中，`.your-text-class` 是你要应用渐变的实际文本元素，`::before` 创建了左至右的渐变，`::after` 则创建了右至左的渐变。