Erzielen mehrerer Schlagschatten auf einem Element mit CSS

Beim Versuch, ein Photoshop-Schaltflächendesign in CSS neu zu erstellen, kann es zu einer Einschränkung beim Anwenden mehrerer Boxschatten auf ein Element kommen einzelnes Element. Standardmäßig lässt CSS nur einen aktiven Box-Shadow zu, entweder innen oder außen.

Um diese Einschränkung zu überwinden, können Sie die von CSS3 bereitgestellte Komma-Trennungsfunktion nutzen. Dadurch können Sie mehrere Schattendefinitionen innerhalb derselben Box-Shadow-Eigenschaft angeben:

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;

Durch Trennen Wenn Sie die beiden Schattendefinitionen durch ein Komma ersetzen, können Sie effektiv zwei unterschiedliche Schatten auf Ihrem Schaltflächenelement erstellen. Der erste Schatten, eingefügt 0 2px 0px #dcffa6, stellt den inneren Schatten des Lichtkastens dar, während der zweite Schatten, 0 2px 5px #000, den äußeren Schlagschatten erzeugt.

Mit dieser Technik können Sie die gewünschte Schaltfläche erreichen Styling mit zwei gleichzeitig aufgetragenen Schatten, was für einen realistischeren und optisch ansprechenderen Effekt sorgt.