CSS は各文字を手動で色付けせずにグラデーションテキストを作成できますか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-11-22 04:50:10

オリジナル

518 人が閲覧しました

Can CSS Create Gradient Text Without Manually Coloring Each Letter?

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 サイトの他の関連記事を参照してください。

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

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