Maison > Article > interface Web > Exemple d'implémentation de l'effet d'ombre en utilisant CSS3

Exemple d'implémentation de l'effet d'ombre en utilisant CSS3

小云云original: 2017-11-20 17:14:092344parcourir

CSS3 est une version améliorée de la technologie CSS, et le développement du langage CSS3 évolue vers la modularité. La spécification précédente était trop volumineuse et complexe en tant que module, elle a donc été divisée en modules plus petits et davantage de nouveaux modules ont été ajoutés. Ces modules incluent : modèle de boîte, module de liste, méthode de lien hypertexte, module de langue, arrière-plan et bordure, effets de texte, mise en page multi-colonnes, etc. Dans ce chapitre, nous vous présenterons un exemple simple d’effet d’ombre CSS3. Vous pouvez utiliser la propriété shadow de CSS3 pour ajouter un effet d'ombre aux éléments d'une page Web. Il s'agit d'une nouvelle fonctionnalité. Cependant, cette fonctionnalité ne fonctionne que sur les navigateurs prenant en charge CSS3, tels que Firefox 3.5, Safari 3.1 + et Google Chrome.

Parlons de la façon d'utiliser l'attribut shadow de CSS3.

L'ombre CSS3 utilise principalement l'attribut box-shadow. Le format de syntaxe de cet attribut est le suivant :

box-shadow : f65652876579e614b30129b34738ac78 f73f7ffdfbb7c8af7c07304c34ca871c color>

Les valeurs d'attribut ci-dessus ont les significations suivantes :

horizontal (horizontal) : Spécifiez l'ombre de décalage horizontal. Des valeurs positives (ex : 5px) décaleront l'ombre vers la droite, tandis que des valeurs négatives (ex : - 10px) la biaiseront vers la gauche.
vertical : Spécifie une ombre décalée verticalement. Les valeurs positives (c'est-à-dire : - 5px) feront l'ombre en bas de la boîte, tandis que les valeurs négatives (c'est-à-dire : - 10px) la biaiseront vers le haut.
flou : définissez le rayon de ramollissement. La valeur par défaut est 0, ce qui signifie aucun flou. Les valeurs positives augmentent le flou, tandis que les valeurs négatives réduisent en fait les ombres. Cette propriété a la valeur par défaut 0.
clolor (color) : valeur de couleur, qui consiste à définir la couleur de l'ombre.

Rappel : Cet attribut peut être ajouté à n'importe quel élément, tel que des images, des balises Div, SPAN, P, etc.

Regardons un exemple d'ombre spécifique. Ce qui suit est un exemple de l'effet et du code spécifique :

<html xmlns="http://www.phpernote.com/">
<head>
<title>CSS3阴影效果实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#shadow {
box-shadow: 10px 10px 5px #888888;
width:500px;
padding:5px;
text-align:center;
font-size:20px;
background:#21759b;
margin:0 auto;
color:#ffffff;
}
</style>
</head>
<body>
<div id="shadow">矩形的 CSS3 的阴影</div>
</body>
</html>

Ce qui précède est un tutoriel simple sur CSS3, j'espère qu'il pourra vous aider. tout le monde.

Recommandations associées :

Conseils pour dessiner divers graphiques de base avec CSS3

Exemples détaillés de styles de barre de défilement personnalisés CSS3

Implémentation de trajectoire de mouvement circulaire en animation CSS3

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!

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：Plusieurs points à prendre en compte dans la mise en page CSSArticle suivant：Plusieurs points à prendre en compte dans la mise en page CSS

Articles Liés

Voir plus