Maison > Article > interface Web > 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:372220parcourir

Comment utiliser CSS pour obtenir leffet dombre des éléments

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>

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 ;

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 (vers la droite) ou négative (vers la gauche) ;

v-shadow : position de l'ombre verticale, qui peut être positive (vers le bas) ou négative (vers le haut) ; distance de flou, allant de 0 à positive Valeurs entre l'infini, plus la valeur est grande, plus le degré de flou est élevé ;

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>

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!

css css3 class 样式表

Déclaration：

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

Article précédent：Dessin CSS : comment réaliser des effets graphiques simplesArticle suivant：Dessin CSS : comment réaliser des effets graphiques simples

Articles Liés

Voir plus