Wie erstelle ich in CSS einen Box-Shadow nur für links und rechts?

So wenden Sie Box-Shadow nur auf der linken und rechten Seite an

Um einen Box-Shadow-Effekt nur auf der linken und rechten Seite zu erzielen Seiten ohne Hacks oder Bilder zu verwenden, können Sie mehrere Box-Shadows nutzen, um das gewünschte Ergebnis zu simulieren. So geht's:

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

Dieser Code erstellt zwei Box-Schatten: einen für die linke Seite (-12 Pixel Versatz) und einen für die rechte Seite (12 Pixel Versatz). Der negative Versatz für den linken Schatten und die Verwendung von -4px verschiebt den Schatten nach innen und stellt sicher, dass er nur am linken und rechten Rand erscheint.

Hinweis: Da die bereitgestellte Lösung „Maskierung“ beinhaltet „Um den Schatten vor anderen Seiten zu verbergen, sollten Sie alternative Ansätze in Betracht ziehen, wie den von @Hamish in der Referenzantwort vorgeschlagenen, der eine robustere Lösung ohne Maskierung bietet.

Um das zu verbessern Um den Effekt noch weiter zu steigern, können Sie zusätzliche Kastenschatten hinzufügen, um jeden Schatten auszublenden, der oben und unten noch durchscheinen könnte:

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

Dieser Code maskiert effektiv den Schatten oben und unten und sorgt so für eine polierter und gewünschter Effekt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS einen Box-Shadow nur für links und rechts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!