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
800 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!

source:php.cn
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