Comment pouvez-vous obtenir plusieurs ombres portées sur un seul élément à l'aide de CSS ?

Réalisation de plusieurs ombres portées sur un élément à l'aide de CSS

En essayant de recréer la conception d'un bouton Photoshop en CSS, vous pouvez rencontrer une limitation dans l'application de plusieurs ombres de boîte à un élément unique. Par défaut, CSS n'autorise qu'une seule ombre de boîte active, interne ou externe.

Pour surmonter cette limitation, vous pouvez tirer parti de la fonctionnalité de séparation par virgule fournie par CSS3. Cela vous permet de spécifier plusieurs définitions d'ombre au sein de la même propriété box-shadow :

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

En séparant les deux définitions d'ombre par une virgule, vous pouvez effectivement créer deux ombres distinctes sur votre élément bouton. La première ombre, en médaillon 0 2px 0px #dcffa6, représente l'ombre intérieure de la boîte à lumière, tandis que la deuxième ombre, 0 2px 5px #000, crée l'ombre portée extérieure.

Cette technique vous permet d'obtenir le bouton souhaité. style avec deux ombres appliquées simultanément, offrant un effet plus réaliste et visuellement attrayant.

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!