Firefoxでは動作しませんが、Chromeで動作します。

Question

次のコードはChromeで動作しますが、Firefoxでは動作しません。このスタイルは成功メッセージを点滅させます。

.rainbow { 
 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22)); 
 
    background-image: gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22)); 
 
    color: transparent; 
 
    -webkit-background-clip: text; 
 
    background-clip: text; 
 
}

<div class="rainbow">Success</div>

Answer 1

私はFirefoxのサポートのためにuはこのような何かを書くために必要があると思います。

div { 
 
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
 
}

<div>A rainbow made from a gradient</div>

の方法は、あなたがそれを使用しているので、私はいつもあなたが望むグラデーションを生成するthis tool

Answer 2

より良い使用thisツールを使用してグラデーションの色を作るために、より

ためhereを見ますそれはmozillaによって認識されません。

background-clip: text;は、私が存在しないため、mozillaでは動作しません。