CSSを使用してテキストの各行に異なる水平のグラデーションを適用することは可能ですか

Question

本文に水平のグラデーションを適用する例がいくつかあります。

ただし、これらの例のそれぞれで使用されているテクニックは、グラデーションをバックグラウンドにしてテキストをクリアにしてからテキストにグラデーションを付けることです。

例としては、これが私の目標のために動作しません

• Is it possible to set horizontal gradient to text via CSS? (left letter one colour, right - another colour)
• Gradient text color
• css text gradient

が含まれます。私は、テキストの行ごとに異なる勾配があるようにしたいと思っています。たとえば、1行目は赤から黒へのグラデーションを持ちます。 2行目は黒から青までのグラデーションを持ちます。 3行目は青色から赤色へのグラデーションを持ちます。ここで

は、私が探しています何の例です：

私は放射状グラデーションが同様に適用可能であることは承知していますが、それはまた、CSSとして動作しませんだろうテキスト本文の長さのテキストサイズの変動に対して再調整されます。

Answer 1

各行に1つの異なる背景を設定できます。しかし、私はライン

p { 
 
    background-image: linear-gradient(to right, red, blue), 
 
    linear-gradient(to right, green, yellow), linear-gradient(to right,purple, cyan); 
 
    background-size: 100% 1.2em; 
 
    background-position: left 0, left 1.2em, left 2.4em; 
 
    background-repeat: no-repeat; 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    font-size: 30px; 
 
}

<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>

の膨大な数のためにこれを適合させる方法が表示されません