In diesem Blog wird die Methode zum Anwenden von Schatteneffekten auf HTML-Elemente erörtert.
Wie lässt sich mit CSS ein Schatteneffekt auf HTML-Elemente werfen?
Das ' Box Schatten ”-Eigenschaft fügt einen Schatten um ein Element hinzu, wobei zwei oder mehr hinzugefügte Effektwerte durch Kommas getrennt werden können.
Die Syntax der Box-Shadow-Eigenschaft wird unten beschrieben.
Syntax
Box Schatten : keiner |h-offset v-offset Unschärfe Ausbreitungsfarbe | Einsatz | Initial | erben ;
Die Beschreibung der oben genannten Syntax ist unten aufgeführt:
- „ keiner ”: Dies 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 Maximieren des Werts wird der Unschärfeeffekt maximiert.
- „ Verbreitung ”: Der vierte Wert repräsentiert die Schattenausbreitung. Es kann positive oder negative Werte enthalten, wobei der positive Wert den Spread erhöht und ein negativer Wert ihn verringert.
- „ Farbe ”: Dieser Wert ist optional und repräsentiert die aktuelle Farbe.
- „ Initial ”: Dieser Wert setzt die Eigenschaft seines Anfangswertes.
- „ erben ”: Dieser Wert erbt die Eigenschaft seines übergeordneten Elements.
- „ Einsatz ”: Der Inset-Wert wird verwendet, um Schatten innerhalb der Box zu erzeugen.
Sehen wir uns anhand eines praktischen Beispiels an, wie der Schatteneffekt aussieht.
Beispiel
Fügen Sie in der HTML-Datei zunächst ein „ -Tags hinzu, um Inhalte für die Webseite bereitzustellen. Wenden Sie nun die CSS-Eigenschaften auf die hinzugefügten HTML-Elemente an. Das div-Element wird mit der Eigenschaft „ Box Schatten „mit dem Wert“ 3px 8px “, was den horizontalen und vertikalen Offset darstellt. Ausgabe Im nächsten Abschnitt werden die HTML-Elemente mit unterschiedlichen Eigenschaften gestaltet. Im Folgenden sind die zusätzlichen CSS-Eigenschaften aufgeführt, die auf das div-Element angewendet werden: Der oben angegebene Code zeigt das div-Element wie unten gezeigt an: Erstellen Sie nun im nächsten Abschnitt zwei Boxen, die zwei div-Elemente darstellen. Wir geben jedem einen unterschiedlichen Wert für mehrere Box-Schatten und beobachten die Ergebnisse. Hier: Es kann beobachtet werden, dass wir das box2 div mit den gleichen Eigenschaften gestaltet haben: Das ' Box Schatten ”-Eigenschaft kann verwendet werden, um einem HTML-Element mehrere Schatteneffekte hinzuzufügen. Dies kann durch Kommas zwischen jedem Schatten erfolgen, wie im folgenden Beispiel gezeigt: Wie Sie sehen können, wurden mehrere Schatten erfolgreich angewendet: Das war alles über die Verwendung des CSS-Rahmenschattens. Das ' Box Schatten ”-Eigenschaft in CSS wird verwendet, um Schatteneffekte auf HTML-Elemente anzuwenden. Diese Eigenschaft besteht hauptsächlich aus zwei Werten, die für den horizontalen Versatz und den vertikalen Versatz gelten, aber es können mehrere Werte vorhanden sein, z. B. für Unschärfe-Effekt, Ausbreitungsradius-Effekt, Farbe und mehr. Darüber hinaus können Sie den Elementen auch mehrere Schatten hinzufügen, indem Sie Kommas zwischen den einzelnen Box-Shadow-Eigenschaften verwenden. Dieser Artikel hat die CSS-Box-Shadow-Eigenschaft mit praktischen Beispielen erklärt.- und
HTML
< div >
< h1 > Der Boxschatten < / h1 >
< p > Box-Schatten: 3px 8px < / p >
< / div >
CSS
div {
Box Schatten : 3px 8px ;
}
CSS
div {
Grenze : 5px solide rgb ( 255 , 111 , 1 ) ;
Box Schatten : 3px 8px 9px 4px #f4af1b ;
}
HTML
>
>
Stilbox1 div
#box1 {
Breite : 40% ;
Höhe : 140px ;
Grenze : 5px solide #ff9c83 ;
Box Schatten : 8px 10px 15px 20px #807f7f ;
}
Stilbox2 div
#box2 {
Breite : 40% ;
Höhe : 140px ;
Grenze : 5px solide rgb ( 255 , 111 , 1 ) ;
Box Schatten : Einsatz 4px 8px #f4af1b ;
Rand links : 350px ;
}
Bonus-Tipp: Hinzufügen mehrerer Schatten zu einem HTML-Element
Fazit