Wie kann ich Boxschatten nur auf der linken und rechten Seite eines Elements erstellen?

Box-Shadow-Anpassung: Schatten ausschließlich auf der linken und rechten Seite erzielen

Um die visuelle Attraktivität von Elementen zu verbessern, zielen Sie ab um Kastenschatten zu integrieren, die ausschließlich auf der linken und rechten Seite erscheinen. Ihre aktuelle Implementierung führte jedoch dazu, dass auf allen Seiten Schatten auftraten. Um dieser Herausforderung zu begegnen, untersuchen wir eine Lösung mit mehreren Box-Shadows.

Konzentrieren wir uns zunächst darauf, Schatten auf den gewünschten Seiten zu erzielen. Durch Anpassen der Werte innerhalb der Eigenschaft können Sie den horizontalen und vertikalen Versatz festlegen. Beachten Sie den folgenden Code:

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

In diesem Beispiel erzeugt der erste Box-Shadow einen Schatten 12 Pixel vom linken Rand und 15 Pixel darunter, der sich nach rechts erstreckt. Der zweite Box-Schatten simuliert den Schatten auf der rechten Seite.

Sie bemerken jedoch möglicherweise eine leichte Lücke im Schatten, da am oberen und unteren Rand keine Schatten vorhanden sind. Um dies zu beheben, sind zusätzliche Kastenschatten erforderlich:

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 zusätzlichen Schatten führen zu einer Maskierung, indem sie einen weißen „Rahmen“ um das Element erzeugen. Dadurch werden die Lücken effektiv verdeckt, was zu einem sauberen horizontalen Schatten führt.

Denken Sie daran, dass diese Technik möglicherweise nicht perfekt ist und Sie möglicherweise auf einige kleinere Unvollkommenheiten stoßen. Es bietet jedoch einen praktischen Ansatz, um Schatten ausschließlich auf der linken und rechten Seite zu erzielen und so die Ästhetik Ihrer Elemente zu verbessern.

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