CSS は各文字を手動で色付けせずにグラデーション テキストを作成できますか?

CSS のグラデーション テキストの色

質問:

グラデーション テキストを生成することは可能ですか?それぞれを手動で定義せずに文字?

答え:

はい、次の方法で CSS を使用してグラデーション テキストを作成できます:

方法 1: CSS グラデーションレインボーと一緒に効果

.rainbow {
  background-image: linear-gradient(
    to right,
    #f22,
    #f2f,
    #22f,
    #2ff,
    #2f2,
    #ff2,
    #f22
  );
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow">Rainbow text</span>

方法 2: カスタム カラーを使用した CSS グラデーション

.rainbow2 {
  background-image: linear-gradient(
    to right,
    #E0F8F7,
    #585858,
    #fff
  );
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow2">No rainbow text</span>

カスタマイズ:

色を追加したり、色から別の色を選択したりできますジェネレーターを使用してカスタム グラデーションを作成します。

以上がCSS は各文字を手動で色付けせずにグラデーション テキストを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。