Maison > interface Web > tutoriel CSS > Voici quelques titres basés sur des questions qui capturent l'essence de l'article : Court et concis : * Comment créer des doubles ombres en CSS ? * Ombres intérieures et extérieures avec CSS : comment ? Plus descriptif :

Voici quelques titres basés sur des questions qui capturent l'essence de l'article : Court et concis : * Comment créer des doubles ombres en CSS ? * Ombres intérieures et extérieures avec CSS : comment ? Plus descriptif :

Mary-Kate Olsen
Libérer: 2024-11-01 08:45:03
original
866 Les gens l'ont consulté

Here are some question-based titles that capture the essence of the article:

Short & Concise:

* How to Create Double Shadows in CSS? 
* Inner and Outer Shadows with CSS: How?

More Descriptive:

* Creating Double Shadows in CSS: Inset & Drop Shadow Effe

Création de doubles ombres sur des éléments CSS

Question :

Comment puis-je appliquer plusieurs boîtes des ombres à un élément en CSS, permettant à la fois une ombre intérieure et extérieure ?

Implémentation :

Pour créer deux ombres sur un seul élément, séparez-les simplement par des virgules les propriétés box-shadow. L'ordre des ombres déterminera leur priorité, cette dernière ombre remplaçant les précédentes.

Exemple :

Pour obtenir la conception de bouton souhaitée avec à la fois une lumière intérieure ombre et une ombre portée extérieure, utilisez le code suivant :

<code class="css">box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;</code>
Copier après la connexion

Explication :

La première valeur, encart 0 2px 0px #dcffa6, crée un encart intérieur ombre de boîte avec une répartition de 2 pixels et la couleur # dcffa6. La deuxième valeur, 0 2px 5px #000, crée une ombre portée externe avec une répartition de 5px et la couleur #000. En plaçant ces valeurs dans la propriété box-shadow et en les séparant par une virgule, les deux ombres seront appliquées à l'élément.

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 de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal