Maison >interface Web >tutoriel CSS >Comment utiliser CSS pour obtenir l'effet d'ombre des éléments
Comment utiliser CSS pour obtenir l'effet d'ombre des éléments
- WBOYoriginal
- 2023-11-21 18:36:372260parcourir
La méthode d'utilisation de CSS pour obtenir l'effet d'ombre des éléments nécessite des exemples de code spécifiques
Dans la conception Web, l'effet d'ombre peut ajouter une impression de tridimensionnalité et de superposition aux éléments de la page, rendant la page plus riche et plus vivante. . CSS (Cascading Style Sheets) fournit une variété de méthodes et de propriétés pour implémenter des effets d'ombre portée.
1. Attribut box-shadow
L'attribut box-shadow est un nouvel attribut en CSS3 qui est utilisé pour obtenir des effets d'ombre d'éléments. En ajoutant l'attribut box-shadow à un élément, vous pouvez obtenir un effet d'ombre sur l'élément, le faisant flotter hors de la page et améliorant l'effet tridimensionnel. La syntaxe de l'attribut
box-shadow est la suivante :
box-shadow : h-shadow v-shadow blur spread color inset
Parmi eux, la signification spécifique de chaque paramètre est la suivante :
- h- ; shadow : position de l'ombre horizontale, qui peut être une valeur positive (à droite) ou une valeur négative (à gauche) ;
- v-shadow : position de l'ombre verticale, qui peut être positive (en bas) ou négative (en haut) ; flou : distance de flou, la valeur est comprise entre 0 et une valeur comprise entre l'infini positif, plus la valeur est grande, plus le degré de flou est élevé ; à l'intérieur de l'élément, lorsque la valeur est une valeur positive, l'ombre s'étendra à l'extérieur de l'élément ;
- couleur : couleur de l'ombre, vous pouvez utiliser une valeur de couleur, une valeur RVB ou une valeur hexadécimale
- inset : valeur facultative, si cela est le cas ; est spécifiée, l’effet d’ombre deviendra une ombre intérieure.
- Ce qui suit est un exemple de code spécifique qui implémente une zone de texte avec un effet d'ombre :
<!DOCTYPE html> <html> <head> <style> .shadow-box { width: 200px; height: 40px; padding: 10px; border: none; border-radius: 5px; box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5); } </style> </head> <body> <input type="text" class="shadow-box" placeholder="请输入内容"> </body> </html>Dans le code ci-dessus, en ajoutant un style avec la classe shadow-box à la zone de saisie, une zone de texte avec un effet d'ombre est zone de texte Effet implémentée. La valeur de l'attribut box-shadow est définie sur "2px 2px 5px 2px rgba(0, 0, 0, 0.5)", ce qui signifie que les positions horizontale et verticale de l'ombre sont toutes deux de 2px, la distance de flou est de 5px, la taille de l'ombre est étendu à 2 pixels et la couleur de l'ombre est noire, avec une transparence de 0,5.
2. Attribut Text-shadow
En plus de l'attribut box-shadow, CSS fournit également l'attribut text-shadow pour obtenir l'effet d'ombre sur le texte. En ajoutant l'attribut text-shadow à l'élément de texte, vous pouvez ajouter un effet d'ombre au texte pour le rendre plus visible et tridimensionnel. La syntaxe de l'attribut text-shadow est la suivante :text-shadow : h-shadow v-shadow Blur Color ;
- couleur : couleur de l'ombre, vous pouvez utiliser la valeur de couleur, la valeur RVB ou la valeur hexadécimale.
- Ce qui suit est un exemple de code spécifique qui implémente un titre avec un effet d'ombre :
<!DOCTYPE html> <html> <head> <style> .shadow-title { font-size: 24px; color: #333; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } </style> </head> <body> <h1 class="shadow-title">投影效果标题</h1> </body> </html>Dans le code ci-dessus, en ajoutant un style avec la classe shadow-title à l'élément title, un titre avec un effet d'ombre est implémenté title . La valeur de l'attribut text-shadow est définie sur "2px 2px 5px rgba(0, 0, 0, 0.5)", ce qui signifie que les positions horizontale et verticale de l'ombre sont toutes deux de 2px, la distance de flou est de 5px, la couleur de l'ombre est de 2px. noir et la transparence est de 0,5. - Grâce aux exemples de code ci-dessus, nous pouvons voir que l'effet d'ombre des éléments peut être facilement obtenu en utilisant les propriétés box-shadow et text-shadow de CSS. Dans le développement réel, nous pouvons ajuster les valeurs des paramètres et les paramètres de couleur en fonction des besoins spécifiques pour obtenir différents effets de projection afin d'améliorer les effets visuels et l'expérience utilisateur de la page.
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!