Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich das Erscheinungsbild von Unterstreichungen mithilfe von CSS-Verläufen steuern?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-06 20:29:03321Durchsuche

How Can I Control the Appearance of Underlines Using CSS Gradients?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn