Comment appliquer un effet d'ombre sur du texte en utilisant CSS ?-tutoriel CSS-php.cn

Comment appliquer un effet d'ombre sur du texte en utilisant CSS ?

王林

Libérer： 2023-08-23 23:17:09

avant

1180 Les gens l'ont consulté

如何使用 CSS 在文本上应用阴影效果？

Nous pouvons appliquer des effets d'ombre sur des éléments de texte en utilisant la propriété "text-shadow" fournie par CSS. La propriété "text-shadow" accepte une liste de valeurs représentant le décalage X et Y de l'ombre par rapport à l'élément, le rayon de flou de l'ombre et la couleur de l'ombre. Les valeurs sont répertoriées dans la syntaxe ci-dessous -

Grammaire

text-shadow: offset_y offset_x blur-radius color

Copier après la connexion

Voici une liste de valeurs et leurs significations -

Offset-x - Il représente la distance de l'ombre à l'élément dans la direction horizontale
Offset-y - Il représente la distance de l'ombre à l'élément dans la direction verticale
Blur Radius − Il représente l'opacité de l'ombre
Couleur − Elle représente la couleur de l'ombre

Exemple 1

Dans cet exemple nous allons appliquer un effet d'ombre sur un élément "h3" et donner à l'ombre un décalage y ainsi qu'une couleur rouge

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Apply Shadow Effect on Text Using CSS?</title>
   <style>
   h3 {
      text-shadow: 0 15px 0 red;
   }
   </style>
</head>
<body>
   <h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>

Copier après la connexion

Exemple 2

Dans cet exemple, nous appliquerons un effet d'ombre sur un élément "h3" et donnerons à l'ombre un décalage y, un décalage x, une transparence et une couleur verte.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Apply Shadow Effect on Text Using CSS?</title>
   <style>
      h3 {
         text-shadow: 10px 15px 5px green;
      }
   </style>
</head>
<body>
   <h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>

Copier après la connexion

Conclusion

Dans cet article, nous avons découvert la propriété « text-shadow » et appliqué des effets d'ombre aux éléments de texte à l'aide de CSS, démontrés à travers 2 exemples différents. Dans le premier exemple, nous avons appliqué un effet d'ombre vertical avec la couleur "rouge", tandis que dans le deuxième exemple, nous avons appliqué un effet d'ombre vertical et horizontal avec la couleur "vert" et un rayon de flou de 5px.

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!