Anleitung zur Hinzufügung eines Schattens zu einem Element

In diesem Leitfaden erfahren Sie, wie Sie einem beliebigen Kasten auf Ihrer Seite einen Schatten hinzufügen können.

Hinzufügen von Kastenschatten

Schatten sind ein gängiges Designelement, das helfen kann, Elemente auf Ihrer Seite hervorzuheben. In CSS werden Schatten auf den Kästen von Elementen mit der box-shadow-Eigenschaft erzeugt (wenn Sie dem Text selbst einen Schatten hinzufügen möchten, benötigen Sie text-shadow).

Die box-shadow-Eigenschaft nimmt eine Reihe von Werten an:

Den Versatz auf der x-Achse
Den Versatz auf der y-Achse
Einen Unschärferadius
Einen Ausbreitungsradius
Eine Farbe
Das Schlüsselwort inset

Im folgenden Beispiel haben wir die X- und Y-Achsen auf 5px, die Unschärfe auf 10px und die Ausbreitung auf 2px gesetzt. Ich verwende als Farbe ein halbtransparentes Schwarz. Spielen Sie mit den verschiedenen Werten, um zu sehen, wie sie den Schatten verändern.

html

<div class="wrapper">
  <button class="shadow">box-shadow</button>
</div>

.wrapper {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  font-weight: bold;
  font-size: 140%;
  background-color: #db1f48;
  color: #fff;
}

css

.shadow {
  box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 0.8);
}

Hinweis: Wir verwenden inset in diesem Beispiel nicht, das bedeutet, dass der Schatten standardmäßig ein Schlagschatten mit dem Kasten auf dem Schatten ist. Eingesetzte Schatten erscheinen innerhalb des Kastens, als ob der Inhalt in die Seite zurückgedrängt wäre.