Wie kann ich einen Box-Shadow nur auf den horizontalen Seiten eines Elements erstellen?

Kastenschatten ausschließlich auf horizontalen Seiten erstellen

Um einen Kastenschatten zu erzielen, der sich nur über die linke und rechte (horizontale) Seite eines Elements erstreckt, sollten Sie die Nutzung mehrerer Elemente in Betracht ziehen Box-Shadow-Definitionen.

Der anfängliche Box-Shadow Eigenschaft,

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

erzeugt einen Schatten auf allen Seiten des Elements. Um nur die linke und rechte Seite anzusprechen, fügen Sie zwei separate Box-Schatten hinzu:

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

Dadurch wird ein Schatten erstellt, der sich um 12 Pixel nach rechts und -12 Pixel nach links erstreckt und so den gewünschten Effekt erzielt.

Es kann auch zu einem leichten Durchscheinen des Schattens an der Ober- und Unterseite kommen. Um dies zu mildern, fügen Sie zwei zusätzliche Box-Schatten hinzu, um das Durchscheinen zu maskieren:

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

Diese aktualisierte Definition maskiert das Durchbluten und beschränkt den Schatten auf die linke und rechte Seite des Elements, ohne dass die Verwendung erforderlich ist von Hacks oder Bildern.

Das obige ist der detaillierte Inhalt vonWie kann ich einen Box-Shadow nur auf den horizontalen Seiten eines Elements erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!