So setzen Sie Box Shadow in CSS nur unten in CSS?

Um Text und Elementen Stil und Design hinzuzufügen, wird der Schatteneffekt verwendet. Es kann einem Element mit dem hinzugefügt werdenBox Schatten”CSS -Eigenschaft. Durch die Verwendung von Kommas können Sie mehrere Effekte gleichzeitig festlegen, ich.e., horizontaler Schatten, vertikaler Schatten, Blur-Radius usw. Diese Eigenschaft bietet verschiedene Funktionen des Bildes mithilfe von Farbkomponenten.

Dieses Handbuch bietet die Methode, die sich auf die Einstellung bezieht “Box Schatten”Nur am Ende eines Elements.

Box-Shadow CSS-Eigenschaft

CSS bietet eine Immobilie mit dem Namen “Box SchattenDas ermöglicht es uns, einen Schatten auf jedes Element oder Bild zu setzen. Diese Eigenschaft hat die folgenden Aspekte:

• • Offset-X: Es wird verwendet, um horizontalen Schatten hinzuzufügen.
  • Offset-y: Es wird verwendet, um vertikalen Schatten hinzuzufügen.
  • Farbe: Es wird verwendet, um die Farbe des Schattens einzustellen.

Syntax

Um diese Punkte zu klären, wechseln wir zur Syntax von Drop-Shadow:

Box-Shadow: Offset-X Offset-y Blur-Radius Farbe;

• • Offset-X und Offset-y sind positiv oder negativ.
  • In horizontaler Wert wird ein positiver Wert verwendet, um den Effekt auf der rechten Seite hinzuzufügen, und ein Negativ ist für die linke Seite.
  • In vertikaler Wert ist der positive Wert für die untere Seite und das Negative für die Oberseite ist.
  • Blur-Radius macht den Schatten heller oder leichter.
  • An der Farbtöne weisen Sie alle Farbe, die Sie dem Bild geben möchten.

Lassen Sie uns ein praktisches Beispiel für das implementierenBox Schatten" Eigentum.

Beispiel: So setzen Sie Box Shadow in CSS nur unten in CSS?

Wir werden den Box Shadow -Effekt auf ein Bild anwenden. Zuerst werden wir ein Bild in HTML hinzufügen, und dann werden wir die CSS -Eigenschaft anwendenBox Schatten”Dazu:

Dies gibt die folgende Ausgabe:

Bewegen Sie uns, um einen Schatteneffekt auf die Unterseite des Bildes hinzuzufügen:

img
Box-Shadow: 0px 15px 5px Orange;

Die obigen Werte repräsentieren die folgenden Punkte:

• • Offset-X ist “0px„Weil wir Schatten nicht horizontal anzeigen wollen.
  • offset-y ist "15pxUm die Breite des Schattens zu setzen. Es muss positiv sein, weil es einen Schatten am unteren Rand des Bildes zeigt.
  • BluR-Radius ist "5px”. Es macht den Schatten leichter.
  • Die Farbe des Schattens ist "orange”.

In diesem Bild können wir Schatten unten sehen.

Abschluss

Um den Schatten am unteren Rand des Bildes anzuzeigen, das “Box SchattenEigenschaft wird verwendet. Zu diesem Zweck wird Offset-X als “festgelegt“0”, Offset-Y ist ein positiver Wert, und die Farbe, die Sie anzeigen möchten, ist ebenfalls eingestellt. Mit Hilfe eines Beispiels hat dieser Artikel erklärt, wie Schatten nur am Ende des Bildes angezeigt werden.