Wie kann ich in CSS einen einseitigen Schlagschatten erstellen?

Erstellen eines einseitigen Schlagschattens

Das Erreichen eines Schlagschattens, der nur eine Seite eines Elements betrifft, kann eine häufige Anforderung im Web sein Design. Sie können beispielsweise auf ein Szenario stoßen, in dem Sie möchten, dass ein Schatten unter ein Element fällt, ohne benachbarte Elemente zu überlappen.

Eine Methode, diesen Effekt zu erzielen, ist die Box-Shadow-Eigenschaft, mit der Sie die Größe angeben können , Ausbreitung und Farbe eines Schattens um ein Element. Das Standardverhalten von box-shadow besteht jedoch darin, einen Schatten auf allen Seiten des Elements zu erzeugen.

Erstellen eines Schlagschattens nur von unten

Um einen Tropfen zu erstellen Um einen Schatten zu erzeugen, der nur unter einem Element angezeigt wird, können Sie ein Pseudoelement erstellen und es am unteren Rand des übergeordneten Elements positionieren. Dieses Pseudoelement erhält dann den Schatteneffekt.

Hier ist ein aktualisiertes Beispiel aus der ursprünglichen Frage mit moderner CSS-Syntax:

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 1px;
    z-index: -1;
    transform: scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

Dieser Code erstellt einen Schlagschatten, der sich nur nach unten erstreckt den unteren Rand des #box-Elements, wodurch der Eindruck eines nur unteren Schattens entsteht. Das Pseudoelement wird unten mit einem Z-Index von -1 positioniert, um sicherzustellen, dass es hinter dem Hauptelement erscheint.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS einen einseitigen Schlagschatten erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!