Wie kann ich das Erscheinungsbild von Unterstreichungen mithilfe von CSS-Verläufen steuern?

So steuern Sie das Erscheinungsbild von Unterstreichungen

Unterstreichungen können angepasst werden, um die visuelle Attraktivität und Lesbarkeit zu verbessern. Um die Länge und Position einer Textdekoration:Unterstreichung zu manipulieren, gibt es eine einfache, aber effektive Technik, bei der Farbverläufe verwendet werden:

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center;
  background-size: 80% 2px;
  background-repeat: no-repeat;
  padding-bottom: 4px;
}

Positionsanpassung:

• Um die Linie zu verschieben, passen Sie die Eigenschaft „Hintergrundposition“ an.
• Zum Beispiel: Hintergrundposition: unten links; Richtet die Linie links vom Text aus.

Längenanpassung:

• Um die Länge zu steuern, passen Sie die Eigenschaft „Hintergrundgröße“ an.
• Beispiel: Hintergrundgröße: 50 % 1 Pixel; erstellt eine kürzere Linie.

Zusätzliche Anpassung:

• Nahe am Text: padding-bottom: 0; bringt die Linie näher an den Text.
• Far from Text: padding-bottom: 10px; vergrößert den Abstand zwischen der Linie und dem Text.
• Verschiedene Farben: Passen Sie die Linienfarbe an, indem Sie die Eigenschaft „Hintergrundbild“ ändern, z. B. „Hintergrundbild: linear-gradient(rot 0 0“. );.

Das obige ist der detaillierte Inhalt vonWie kann ich das Erscheinungsbild von Unterstreichungen mithilfe von CSS-Verläufen steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!