每行/字符的颜色渐变

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> 上应用样式时，颜色渐变效果将应用于整个段落，而不是单个字符/行。 (screenshot)

有没有办法让它应用于单个字符/行，每个都有垂直颜色渐变？ (example)

---

编辑：应用在单个字符或单行上都可以，因为我想要垂直渐变。字符/线条的垂直渐变是相同的。

Answer 1

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

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-clip CSS 属性解释（来自MDN）：

background-clip CSS 属性设置元素的背景是否延伸到其边框框、填充框或内容框下方。

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

JS Fiddle Demo

---

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

revised JSFiddle demo

Answer 2

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

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

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