HTML ist die Sprache, die zur Bereitstellung der Struktur von Webseiten verwendet wird, und CSS ermöglicht es uns, Stile auf die Elemente anzuwenden. Auf einer Webseite werden verschiedene Eigenschaftswerte so eingestellt, dass sie verschiedene Stile anwenden, z.

In diesem Blog werden die Methode erörtert, um Schatteneffekte auf HTML -Elemente anzuwenden.

So lassen Sie den Schatteneffekt auf HTML -Elemente mit CSS fallen lassen?

Der "Box SchattenEigenschaft fügt einen Schatten um ein Element hinzu, bei dem zwei oder mehr hinzugefügte Effektwerte durch Kommas getrennt werden können.

Die Syntax der Box-Shadow-Eigenschaft wird unten beschrieben.

Syntax

Box-Shadow: Keine | H-offset v-offset Blur Spread Color | Einschub | Initial | Erben;

Die Beschreibung der oben genannten Syntax ist unten aufgeführt:

• “keiner”: Es ist der Standardwert der Box-Shadow-Eigenschaft.
• “h-offset”: Dieser Wert repräsentiert den horizontalen Abstand.
• “V-Offset: Dieser Wert definiert den vertikalen Abstand.
• “verwischen”: Der dritte Wert ist eine Unschärfe. Durch die Maximierung des Wertes maximiert der Unschärfeeffekt.
• “Ausbreitung”: Der vierte Wert repräsentiert den Schattenverteilungsverteiler. Es kann positive oder negative Werte halten, wobei der positive Wert die Ausbreitung erhöht und ein negativer Wert ihn verringert.
• “Farbe”: Dieser Wert ist optional und repräsentiert die aktuelle Farbe.
• “Initial: Dieser Wert legt die Eigenschaft seines Anfangswertes fest.
• “erben: Dieser Wert erbt die Eigenschaft seines übergeordneten Elements.
• “Einsatz”: Der Einschubwert wird verwendet, um Schatten in der Box zu erstellen.

Mal sehen, wie der Schatteneffekt durch ein praktisches Beispiel aussieht.

Beispiel

Fügen Sie in der HTML -Datei zunächst eine hinzu “”. In diesem Element hinzufügen

Und

Tags, um Inhalte zur Webseite bereitzustellen.

Html

Der Schattenschatten

Box-Shadow: 3px 8px

Wenden Sie nun die CSS -Eigenschaften auf die hinzugefügten HTML -Elemente an.

CSS

div
Box-Shadow: 3px 8px;

Das DIV -Element wird mit der Eigenschaft angewendet “Box Schatten"Mit dem Wert"3px 8px”, Was den horizontalen Offset und den vertikalen Offset darstellt.

Ausgang

Im nächsten Abschnitt werden die HTML -Elemente mit unterschiedlichen Eigenschaften gestaltet.

CSS

div
Grenze: 5px fester RGB (255, 111, 1);
Box-Shadow: 3px 8px 9px 4px #f4af1b;

Im Folgenden finden Sie die zusätzlichen CSS -Eigenschaften, die auf das DIV -Element angewendet werden:

• “Grenze”Eigenschaft wird dem Wert 5px fester RGB (255, 111,1) zugewiesen, wobei 5px die Breite des Randes angibt, Feststoff den Stil des Randes darstellt, und RGB (255, 111, 1) ist die Farbe.
• “Box SchattenEigenschaft mit dem Wert 3px 8px 9px 4px #f4af1b repräsentiert den H-Offset als 3px, den V-Offset als 8px, Blur als 9PX, verteilt als 4px und #F4AF1B spezifiziert die Farbe.

Der oben gegebene Code zeigt das Div-Element wie unten gezeigt an:

Erstellen Sie nun im nächsten Abschnitt zwei Kästchen, die zwei Divelemente darstellen. Wir geben jeweils unterschiedliche Werte mit mehreren Box-Shadow-Werten und beobachten die Ergebnisse.

Html

Der Schattenschatten

Box-Shadow: 3px 8px 9px 4px #f4af1b

Der Schattenschatten

Box-Shadow: 3px 8px 9px 4px #f4af1b

Style Box1 Div

#Box1
Breite: 40%;
Höhe: 140px;
Grenze: 5px fest #ff9c83;
Box-Shadow: 8px 10px 15px 20px #807f7f;

Hier:

• “#Box1”Wird verwendet, um mit ID -Box1 auf das DIV zuzugreifen.
• “BreiteEigenschaft wird für die Einstellung der Breite des Elements verwendet.
• “HöheEigenschaft legt die Höhe des Elements fest.
• “Grenze”Ist der Wert 5px fester #ff9c83 angegeben, wobei 5px die Breite des Randes angibt, fest den Stil des Randes repräsentiert, und #ff9c83 ist die Farbe.
• “Box Schatten"Eigenschaft wird als" festgelegt "8px 10px 15px 20px #807f7fWenn 8PX horizontaler Versatz ist, ist 10px vertikaler Versatz, 15px ist der Unschärfeneffekt, 20px ist Spread Effect und #807F7F die Farbe des Schattens.

Style Box2 Div

#Box2
Breite: 40%;
Höhe: 140px;
Grenze: 5px fester RGB (255, 111, 1);
Box-Shadow: Einschub 4px 8px #f4af1b;
Rand-Links: 350px;

Es kann beobachtet werden, dass wir den Box2 Div mit den gleichen Eigenschaften gestylt haben:

Bonus -Tipp: Hinzufügen mehrerer Schatten im HTML -Element

Der "Box SchattenEigenschaft kann verwendet werden, um einem HTML -Element mehrere Schatteneffekte hinzuzufügen. Dies kann mit Kommas zwischen jedem Schatten erfolgen, wie im folgenden Beispiel gezeigt:

Box-Shadow: 6PX 6PX RGB (91, 0, 143), 12px 5px RGB (201, 8, 8), 16px 16px 8px RGB (226, 213, 29);

Wie Sie sehen können, wurden mehrere Schatten erfolgreich angewendet:

Das drehte sich um die Verwendung des CSS -Grenzschattens.

Abschluss

Der "Box SchattenDie Eigenschaft in CSS wird verwendet, um Schatteneffekte auf HTML -Elemente anzuwenden. Diese Eigenschaft besteht hauptsächlich aus zwei Werten, die für horizontale Offset und vertikale Offsets bestimmt sind. Es kann jedoch mehrere Werte geben, z. Darüber hinaus können Sie den Elementen auch mehrere Schatten hinzufügen, indem Sie Kommas zwischen jeder Box-Shadow-Eigenschaft verwenden. Dieser Artikel hat die CSS-Box-Shadow-Immobilie mit praktischen Beispielen erläutert.