Wie erstelle ich einen Boxschatten nur auf der linken und rechten Seite eines Elements?-CSS-Tutorial-php.cn

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

Susan Sarandon

Freigeben： 2024-11-27 12:09:09

Original

1007 Leute haben es durchsucht

How to Create a Box Shadow Only on the Left and Right Sides of an Element?

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:

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

Nach dem Login kopieren

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:

1	`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);`

Nach dem Login kopieren

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!