Wie können Sie in CSS mehrere Boxschatten für ein einzelnes Element erstellen?

Verwenden mehrerer CSS3-Boxschatten auf einem einzelnen Element

In CSS ist es mit CSS3 möglich, mehrere Boxschatten auf ein einzelnes Element anzuwenden. Dies bietet eine größere Flexibilität beim Erstellen komplexer Schatteneffekte, z. B. beim Kombinieren eines inneren Glanzes mit einem äußeren Schlagschatten.

Problem:

Sie möchten ein Photoshop-Modell replizieren hat zwei Schatten auf einer Schaltfläche: einen inneren, helleren Kastenschatten und einen äußeren Schlagschatten. Allerdings scheint die CSS-Box-Shadow-Eigenschaft nur einen Schatteneffekt pro Element zuzulassen.

Lösung:

Um den gewünschten Dual-Shadow-Effekt zu erzielen, können Sie verwenden die durch Kommas getrennte Syntax zur Angabe mehrerer Schatten. Zum Beispiel:

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

In diesem Code:

• Der erste Schatten ist ein eingefügter Boxschatten mit einer helleren Farbe (#dcffa6) und einem Versatz von 2 Pixel.
• Der zweite Schatten ist ein Schlagschatten mit einer dunkleren Farbe (#000) und einem Versatz von 2 Pixel für die Horizontale und 5 Pixel für die Vertikale.

Indem Sie diese Schatten durch ein Komma trennen können Sie je nach Wunsch eine Schaltfläche mit einem inneren Glanz und einem äußeren Schlagschatten erstellen.

Das obige ist der detaillierte Inhalt vonWie können Sie in CSS mehrere Boxschatten für ein einzelnes Element erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!