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