Pouvez-vous combiner les ombres de la boîte intérieure et extérieure en CSS ?

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

Le style des éléments avec des ombres portées en CSS est souvent essentiel pour créer des designs visuellement attrayants . Cependant, certains scénarios, comme l’ajout d’une ombre intérieure et extérieure à un bouton, peuvent s’avérer difficiles. Cet article explore une solution à ce problème.

Dans l'exemple, appliquer à la fois une ombre de caisson lumineux interne (2 px) et une ombre portée à l'extérieur du bouton (5 px) semble simple dans les fonctionnalités Inner Shadow et Drop Shadow de Photoshop. En CSS, cependant, l'utilisation de box-shadow seule remplacera toute boîte-ombre insérée.

Pour contourner cette limitation :

Combinez les ombres à l'aide de virgules

CSS vous permet de spécifier plusieurs ombres sur un élément en les séparant par des virgules. De cette façon, vous pouvez créer des effets d'ombre complexes combinant différents types, tels que des ombres intérieures et portées.

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

Ce code mis à jour générera l'effet souhaité, combinant à la fois une ombre intérieure de boîte à lumière et une ombre extérieure. ombre sur le bouton.

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!