HTML5 - Box-Schatten

Dies ist eines der am meisten erwarteten Merkmale des neuen Standards von CSS3 und das in Verbindung mit HTML5 schafft es viele Blicke auf sich zu ziehen, wir verweisen auf die Box Schatten wer erlaubt uns, Schatten auf die Kästchen in unserem Dokument zu setzen HTML, wodurch ein Effekt erzeugt wird, als würde er auf der Seite schweben.
Das Element Box Shadow muss wie folgt aufgebaut sein:
box-shadow: hoffset voffset Unschärfe verbreiten Farbeinsatz
Wenn jedes seiner Attribute eine Funktion ausführt, sehen wir uns jedes davon im Detail an:

• Hoffset: Es ist der horizontale Versatz, der ein Längenwert ist. Ein positiver Wert verschiebt den Box Schatten rechts hingegen verschiebt ein negativer Wert den Box Shadow nach links.

• Voffset: Es ist der vertikale Versatz, der ein Längenwert ist. Ein positiver Wert verschiebt den Box-Schatten unter die Box des Gegenstands, und ein negativer Wert verschiebt den Box-Schatten über die Box des Gegenstands.

• Verwischen: (Optional) Gibt den Radius der Schattendefinition an, bei dem es sich um einen Längenwert handelt. Je höher der Wert, desto verschwommener bleibt der Rand des Elementrahmens. Beim Standardwert 0 sieht der Rahmen des Boxschattens vollständig definiert aus.

• Verbreiten: (Optional) Geben Sie den Diffusionsradius des Schattens an, er ist ein Längenmaß. Ein positiver Wert bewirkt, dass sich der Schatten in alle Richtungen der Box des umschließenden Elements ausdehnt, und ein negativer Wert bewirkt, dass sich der Schatten des umschließenden Elements zusammenzieht.

• Farbe: (Optional) Dies ist die Farbe des Schattens. Wenn es weggelassen wird, entscheidet der Browser über die Farbe.

• Einsatz: (Optional) Erzeugt den Schattenwurf innerhalb der Box des Elements, auf das er angewendet wird.

Sobald wir die Attribute kennen, gehen wir schnell zu einem Codebeispiel über, um das Gelernte in die Praxis umzusetzen.

 Beispiel
Es gibt viele verschiedene Obstsorten – allein von Bananen gibt es über 500 Sorten. Wenn wir die unzähligen Apfel-, Orangen- und anderen bekannten Obstsorten hinzufügen, stehen wir vor Tausenden von Möglichkeiten.

Wie wir sehen, können wir die Box Schatten Im CSS innerhalb des style-Tags erzeugt dieser Code das folgende Ergebnis:

Ein weiterer interessanter Aspekt ist, dass wir in derselben Deklaration eines Box-Schattens mehrere Schatten angeben können, zum Beispiel werden wir im folgenden Code einen zusätzlichen Schatten in den Einschub einfügen, mal sehen:

 Beispiel
Es gibt viele verschiedene Obstsorten – allein von Bananen gibt es über 500 Sorten. Wenn wir die unzähligen Apfel-, Orangen- und anderen bekannten Obstsorten hinzufügen, stehen wir vor Tausenden von Möglichkeiten.

Sehen wir uns nun an, wie beide Schatten in unserem Element angezeigt werden: