Box-Schatten nur am unteren Rand in CSS festlegen

Dieser Artikel stellt Sets box-shadow nur am unteren Rand der Box in CSS vor.

Verwenden Sie die Eigenschaft box-shadow, um den unteren Boxschatten in CSS festzulegen

Wir können die Eigenschaft box-shadow verwenden, um den Schatten nur am unteren Rand der Box festzulegen. Die Eigenschaft box-shadow legt den Schatten des ausgewählten Elements fest.

Die Eigenschaft nimmt mehrere Optionen. Lassen Sie uns zunächst die Eigenschaft anhand ihrer unten gezeigten Syntax verstehen.

box-shadow: [h-offset] [v-offset] [blur-radius] [spread-radius] [color];

Es ist wichtig zu verstehen, wie die Eigenschaft box-shadow funktioniert, um sie zu implementieren. Die Option h-offset setzt den Schatten in horizontaler Richtung des Elements.

Der positive Wert setzt den Schatten in die rechte Richtung des Elements, während der negative Wert den Schatten in die linke Richtung des Elements setzt.

Ebenso setzt die Option v-offset den Schatten vertikal. Auch hier setzt der positive Wert den Schatten nach unten, während der negative Wert ihn nach oben auf das Element setzt.

Die Option blur-radius gibt den Blur-Radius des Schattens an. Je größer der Unschärferadius wird, desto unschärfer wird der Schatten.

Die Option spread-radius legt die Grösse des Schattens auf das Element fest. Der positive Wert erhöht die Größe des Schattens, während der negative Wert abnimmt.

Wir können auch die Option color verwenden, um die Farbe des Schattens einzustellen. Die Optionen blur-radius, spread-radius und color sind jedoch optional.

Nachdem wir nun gelernt haben, wie die Eigenschaft box-shadow funktioniert, ist es an der Zeit, sie zu implementieren, um einen unteren Schatten für eine Box zu erzeugen.

Dazu können wir h-offset auf 0 setzen und v-offset einen Wert geben. Daher erscheint der Schatten nur am unteren Rand des Felds.

Erstellen Sie beispielsweise eine Box mit einer bestimmten Höhe und Breite. Setzen Sie die Eigenschaft background-color auf black.

Verwenden Sie als Nächstes die Eigenschaft box-shadow, um die verschiedenen Optionen einzustellen. Stellen Sie 0 für h-offset, 8px für v-offset, 2px für blur-radius, -2px für spread-radius und die color auf gray.

Als Ergebnis erhalten wir eine schwarze Box mit einem grauen Schatten an der Unterseite. So haben wir gelernt, wie man die Eigenschaft box-shadow verwendet, um den Schatten in CSS auf den unteren Rand der Box zu setzen.

<div class="box">
</div>

.box {
 height:200px;
 width:200px;
 background-color:black;
 box-shadow: 0 8px 2px -2px gray;
}