Effet de texte de couleur dégradé pour chaque ligne de paragraphe

Cette fois je vais vous apporter l'effet de texte dégradé pour chaque ligne d'un paragraphe. Quelles sont les précautions pour l'effet de texte dégradé de chaque ligne d'un paragraphe. Voici un cas pratique, prenons. un regard.

Aujourd'hui, j'ai vu un effet écrit en CSS sur Codepen. Chaque ligne de texte d'un paragraphe a un effet de dégradé. Il n’est pas étrange d’implémenter un effet de remplissage dégradé pour une seule ligne de texte ou un seul mot, mais il s’agit d’un effet de remplissage dégradé de texte pour chaque ligne d’un paragraphe. On estime que cela suscitera encore la curiosité de nombreuses personnes. Si vous faites partie des curieux, continuez à lire pour le découvrir !

Effet cible

L'effet cible d'aujourd'hui est d'obtenir l'effet suivant, ou de comprendre les astuces pour obtenir cet effet :

En voyant l'effet ci-dessus, je pense que la première chose à laquelle beaucoup de gens penseront est background-clip: texte, couleur: transparent et dégradé linéaire à compléter. Alors est-ce le cas ?

Comment compléter l'effet de dégradé de chaque ligne de texte dans un paragraphe

Les étudiants qui connaissent CSS le savent bien, utilisez :

background-image: linear-gradient(to right, deeppink, dodgerblue);
-webkit-background-clip: text;
color: transparent;

Vous pouvez facilement obtenir un effet de remplissage dégradé pour le texte. Par exemple, l'exemple suivant :

Faisons une petite expérience. Quel sera l'effet si le texte n'est pas un mot ou une seule ligne mais un paragraphe entier ?

L'effet semble également parfait. Si vous modifiez les paramètres de l'effet dégradé, l'effet dégradé est un biseau :

background-image: linear-gradient(135deg, deeppink, dodgerblue);

Regardez l'effet des deux :

Prenez de plus près regardez, les deux effets sont toujours différents. Regardons d'abord le conteneur de même taille (la taille de l'élément p dans cet exemple est de 765px * 165px. Pour deux effets de dégradé différents, regardez d'abord l'effet de remplissage de droite :

Regardons l'effet de remplissage de 135deg :

À ce stade, vous savez peut-être ce qui est différent de l'exemple précédent ? Et savez-vous aussi quelle en est la raison ? Si nous voulons que différents dégradés aient le même effet de remplissage pour chaque ligne d’un paragraphe, comment y parvenir ? Avant la mise en œuvre, résumons brièvement :

Utilisation vers la droite ou vers la gauche en dégradé linéaire, qu'il s'agisse d'un seul mot, d'une seule ligne de texte ou de plusieurs lignes de texte, l'effet de remplissage de texte résultant sera le même. Mais pour les autres paramètres d’angle de dégradé, l’effet de chaque ligne dans un remplissage de texte multiligne sera différent.

Retour au sujet ? Comment réaliser plusieurs rangées et avoir le même effet quel que soit l’angle de remplissage ? Il existe un attribut clé pour obtenir cet effet :

. Pour faire simple, l'attribut box-decoration-break a deux valeurs d'attribut : slice et clone, et leurs effets correspondants sont les suivants : box-decoration-break

est utilisé dans un paragraphe, et son effet est le suivant :

Est-ce qu'on se rapproche de notre objectif ? Utilisez ensuite cet attribut box-decoration-break:clone pour notre exemple :

background-image: linear-gradient(135deg, deeppink, dodgerblue);
background-clip: text;
-webkit-background-clip: text;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: transparent;

L'effet est le suivant :

Vérifions si c'est le cas Conforme à l'effet que nous attendions :

Conseils : box-decoration-break est appliqué aux éléments en ligne et mis en correspondance avec la line-height correspondante pour permettre un certain espacement entre les lignes.

Avec le recul, examinons la différence entre l'utilisation de box-decoration-break entre des éléments en ligne et des éléments de bloc :

N'est-ce pas très Parfait. Si vous le souhaitez, essayez-le vous-même.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Traitement des événements de retour d'écoute H5 APP

Technologie frontale pour implémenter la superposition de texture de texte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!