Wie erstelle ich horizontale Kastenschatten ohne Bilder oder Tricks?

Wie man horizontale Box-Schatten erreicht

Wie man horizontale Box-Schatten nur auf der linken und rechten (horizontalen?) Seite erreicht, ohne darauf zurückzugreifen Irgendwelche Tricks oder Bilder, um einen Box-Shadow-Effekt zu erzielen?

Die Verwendung des folgenden Codes erzeugt einen umgebenden Schatteneffekt:

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

Lösung: Mehrere Box-Schatten verwenden

Sie können mehrere Boxen verwenden -shadow löst dieses Problem, jeder Box-Shadow Entsprechende Seite:

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

Unvollkommenen Schatten maskieren (optional)

Um den Ausblutungseffekt noch weiter zu maskieren, fügen Sie unten und oben zwei Ebenen zum Maskieren hinzu :

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 horizontale Kastenschatten ohne Bilder oder Tricks?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!