每个 line/character 的颜色渐变

Question

我想在不使用Javascript的情况下使我的字体具有垂直颜色渐变，例如this one。

要应用的文本：

<p>
  aaaaaaaaaaaaaaaa<br>
  bbbbbbbbbbbbbbbb<br>
  cccccccccccccccc<br>
</p>

经过一些研究，我有：

[data-component="text-box"] p {
    font-size:20px;
    font-weight:700;
    background-image:-webkit-linear-gradient(bottom,#9E9F9E,#ffffff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

但是，当我在 <p> 上应用样式时，颜色渐变效果应用于整个段落，而不是单个 characters/lines。 (screenshot)

有什么方法可以让它应用于单个 characters/lines，让每个都具有垂直颜色渐变？ (example)

编辑：应用于单个字符或单行都可以，因为我想要垂直渐变。 chars/lines 的垂直渐变相同。

Answer 1

CSS 渐变文本中最重要的部分是实际的 CSS 本身。查看 CSS.

的基本形式

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

您可以选择任何 html DOM 元素并使用颜色渐变字体。

Answer 2

这里是你想要的效果的解决方案：

HTML

<p class="text-gradient">
TaihouKai
</p>

CSS

.text-gradient {
    font-size: 20px;
    font-weight: 700;
    background-image: linear-gradient(to bottom, #9E9F9E, #ffffff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

background-clipCSS属性的解释（来自MDN）：

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

这属性允许将背景渐变、图像或颜色“投射”到角色本身。

JS Fiddle Demo

UPDATE如果要处理多行，用换行符<br />分隔，可以用JavaScript实现：

revised JSFiddle demo

每个 line/character 的颜色渐变

Color gradient for each line/character

css

linear-gradients