Propriétés de la police dégradée CSS : linéaire-gradient et font-stretch

Propriétés des polices dégradées CSS : dégradé linéaire et étirement de la police, des exemples de code spécifiques sont requis

Dans la conception Web moderne, afin d'attirer les utilisateurs et d'améliorer l'effet visuel de la page, les polices dégradées sont devenues une conception populaire s'orienter. CSS fournit certaines propriétés pour obtenir des effets de police dégradés, notamment le dégradé linéaire et l'étirement de la police. Cet article se concentrera sur l'utilisation de ces deux propriétés et fournira des exemples de code spécifiques pour aider les lecteurs à mieux les maîtriser.

1. Attribut Linear-gradient

L'attribut Linear-gradient est utilisé pour créer un arrière-plan dégradé linéaire. Il peut être utilisé pour la couleur d’arrière-plan du texte, la couleur de la bordure, etc. Pour les polices dégradées, nous pouvons obtenir cet effet en l’utilisant comme couleur d’arrière-plan du texte.

La syntaxe d'utilisation de l'attribut linéaire-gradient pour créer une police de dégradé est la suivante :

background: linear-gradient(direction, color-stop1, color-stop2, ...);

où direction spécifie la direction du dégradé, qui peut être l'une des valeurs suivantes :

• to top : dégradé de bas en haut
• en bas : dégradé de haut en bas
• à gauche : dégradé de droite à gauche
• à droite : dégradé de gauche à droite

color-stop spécifie la couleur et la position du dégradé, vous pouvez utiliser des pourcentages ou valeurs de pixels. Par exemple :

h1 {
  background: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%);
}

L'effet du code ci-dessus est de créer une police dégradée du rouge au vert en passant par le bleu dans la balise h1.

2. Attribut Font-stretch

L'attribut font-stretch est utilisé pour contrôler le degré d'étirement de la police. Cela peut rendre la police plus épaisse ou plus mince. Dans la conception de polices dégradées, l'attribut font-stretch peut être utilisé en conjonction avec l'attribut linéaire-gradient pour rendre les polices dégradées plus attrayantes.

La syntaxe d'utilisation de l'attribut font-stretch est la suivante :

font-stretch: normal|ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded;

La signification de chaque valeur est la suivante :

• normal : largeur de police normale
• ultra-condensée : police très compacte
• extra-condensée : très compacte La police
• condensée : une police compacte
• semi-condensée : une police plus compacte
• semi-expansée : une police plus étendue
• expansée : une police étendue
• extra-expandée : une police très étendue
• ultra-expansé : Police très étendue

Par exemple, nous pouvons combiner le code de police dégradé ci-dessus avec l'attribut font-stretch pour créer un effet de police plus unique :

h1 {
  background: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%);
  font-stretch: expanded;
}

Le code ci-dessus rendra la police dans le titre h1 Stretch horizontalement pour augmenter sa largeur.

Résumé

Les polices dégradées peuvent ajouter des effets visuels uniques aux pages Web et attirer l'attention des utilisateurs. Nous pouvons facilement obtenir cet effet en utilisant les propriétés CSS Linear-gradient et font-stretch. Lors de la conception de polices dégradées, vous pouvez ajuster la direction du dégradé et le degré d'étirement de la police en fonction de vos besoins pour rendre la police plus attrayante. Espérons que les exemples de code et les explications contenus dans cet article aideront les lecteurs à mieux comprendre et appliquer ces deux propriétés.

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!