如何使用纯CSS实现每行/每个字符独立的垂直字体颜色渐变效果

纯CSS实现方案（无需JavaScript） #

方案1：不修改现有HTML结构 #

利用box-decoration-break: clone属性实现行级独立渐变，该属性可控制行内元素换行时，每一行独立克隆完整的样式规则，包括背景渐变，调整后的CSS代码如下：

[data-component="text-box"] p {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2; /* 固定行高保证每行渐变高度统一 */
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-image: linear-gradient(to top, #9E9F9E, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

该方案兼容所有现代主流浏览器，旧版webkit内核浏览器添加-webkit-前缀即可正常生效。

方案2：兼容度更高的实现（可接受轻微修改HTML） #

如果需要适配更旧的浏览器，可将每一行文本单独用<span>标签包裹，直接给行级元素添加渐变样式即可，无需依赖特殊CSS属性：
修改后的HTML结构：

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

对应的CSS代码：

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

以上两种方案都可以实现每行独立的垂直渐变效果，符合需求。

内容的提问来源于stack exchange，提问作者TaihouKai