Wie erstelle ich einen Boxschatten nur auf der linken und rechten Seite eines Elements?

Boxschatten ohne Hacks auf die linke und rechte Seite beschränkt

Frage:

Wie kann man ausschließlich einen Boxschatten erstellen? auf der linken und rechten Seite eines Elements, ohne auf Hacks oder zurückgreifen zu müssen Bilder?

Antwort:

Die Lösung verwendet mehrere Kastenschatten, einen für jede bestimmte Seite:

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

Es ist jedoch erwähnenswert dass dieser Ansatz nicht ganz perfekt ist, da er zu Schattenausblutungen führen kann. Um dies zu mildern, können oben und unten zusätzliche Kastenschatten hinzugefügt werden, um den Überlauf 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);

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Boxschatten nur auf der linken und rechten Seite eines Elements?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!