Comment créer plusieurs ombres de boîte sur un seul élément en CSS ?

Utilisation de plusieurs ombres de boîte CSS3 sur un seul élément

En CSS, il est possible d'appliquer plusieurs ombres de boîte à un seul élément à l'aide de CSS3. Cela offre une plus grande flexibilité lors de la création d'effets d'ombre complexes, tels que la combinaison d'une lueur intérieure avec une ombre portée extérieure.

Problème :

Vous souhaitez reproduire une maquette Photoshop qui a deux ombres sur un bouton : une ombre intérieure de boîte plus claire et une ombre portée extérieure. Cependant, la propriété CSS box-shadow semble n'autoriser qu'un seul effet d'ombre par élément.

Solution :

Pour obtenir l'effet d'ombre double souhaité, vous pouvez utiliser la syntaxe séparée par des virgules pour spécifier plusieurs ombres. Par exemple :

<code class="css">box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;</code>

Dans ce code :

• La première ombre est une ombre de boîte incrustée, avec une couleur plus claire (#dcffa6) et un décalage de 2px.
• La deuxième ombre est une ombre portée, avec une couleur plus foncée (#000) et un décalage de 2px pour l'horizontale et de 5px pour la verticale.

En séparant ces ombres par une virgule , vous pouvez créer un bouton avec à la fois une lueur intérieure et une ombre portée extérieure, comme vous le souhaitez.

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!