Maison > interface Web > tutoriel CSS > Comment puis-je contrôler l'apparence des soulignements à l'aide de dégradés CSS ?

Comment puis-je contrôler l'apparence des soulignements à l'aide de dégradés CSS ?

Barbara Streisand
Libérer: 2024-11-06 20:29:03
original
389 Les gens l'ont consulté

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

Comment contrôler l'apparence des soulignements

Les soulignements peuvent être personnalisés pour améliorer l'attrait visuel et la lisibilité. Pour manipuler la longueur et la position d'un texte-décoration:soulignement, il existe une technique simple mais efficace impliquant l'utilisation de dégradés :

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

Ajustement de la position :

  • Pour déplacer la ligne, ajustez la propriété background-position.
  • Par exemple, background-position: bottom left; aligne la ligne à gauche du texte.

Ajustement de la longueur :

  • Pour contrôler la longueur, ajustez la propriété background-size.
  • Par exemple, background-size : 50 % 1px ; crée une ligne plus courte.

Personnalisation supplémentaire :

  • Fermer le texte : padding-bottom : 0 ; rapproche la ligne du texte.
  • Loin du texte : padding-bottom: 10px; augmente la distance entre la ligne et le texte.
  • Différentes couleurs : Personnalisez la couleur de la ligne en modifiant la propriété background-image, par exemple background-image : Linear-gradient(red 0 0 );.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal