Vergleich von CSS-Schatteneffekten: Schlagschatten und Box-Schatten

Drop-Shadow und Box-Shadow sind beide CSS-Eigenschaften für Schatteneffekte (Halo-Effekte). Der größte Unterschied zwischen beiden besteht darin, dass Box-Shadow nur rechteckige Schatten erzeugen kann, während Drop-Shadow Schatten mit genau derselben Form wie der undurchsichtige Bereich des Objekts erzeugen kann. Hier ist die Verwendung von zwei CSS-Eigenschaften:

.Schlagschatten {
    -webkit-filter: Schlagschatten(12px 12px 7px rgba(0, 0, 0, 0,7));
    Filter: Schlagschatten (12px 12px 7px rgba (0, 0, 0, 0,7))
}

.box-shadow {
    Kastenschatten: 12px 12px 7px rgba (0, 0, 0, 0,7);
}

Da es sich bei beiden um Schatteneffekte (Halo-Effekte) handelt, sind die Parameter (Werte), die für beide eingestellt werden können, nahezu identisch: Im obigen Beispiel stellen alle Parameterwerte von links nach rechts dar: horizontaler Versatz, vertikaler Versatz, Schattenunschärfeabstand, Schattenfarbe.

Als nächstes werden wir für Sie Drop-Shadow und Box-Shadow weiter vergleichen

Rand- und Transformationseffekte

Die Schatten von Schlagschatten und Kastenschatten können beide die abgerundeten Ecken und Verformungseffekte des Rahmens widerspiegeln. Der Unterschied besteht darin: Schlagschatten spiegelt die Form des tatsächlichen Rahmens wider, ein durchgezogener Rahmen hat einen durchgezogenen Schatten und ein gepunkteter Rahmen hat einen gepunkteten Schatten; Box-Shadow behandelt den Rahmen und den Inhalt darin als vollständiges Quadrat und erstellt einen Schatten des gesamten Quadrats, während der Rahmenstil ignoriert wird und es direkt als durchgezogener Rahmen behandelt wird.

.Kasten {
    Rand: 5px durchgezogen #262b57;
    Breite: 120px;
    Höhe: 120px;
    Rahmenradius: 10px;
    transformieren: drehen (15 Grad);
    Schriftgröße: 40px;
    Textausrichtung: zentriert;
    Zeilenhöhe: 120px;
}

.gestrichelt {
    Rahmenstil: gestrichelt;
}

Hintergrund und Transparenz

Wenn die Box eine festgelegte Farbe hat (nicht transparent), sehen die Schatteneffekte von Schlagschatten und Boxschatten ähnlich aus. Was ist, wenn der Hintergrund des Blocks halbtransparent ist? Wir können auf dem Bild erkennen, dass die Farbe um den Schatten herum dunkler und die Farbe in der Mitte heller ist. Daraus können wir schließen, dass die Transparenz den Schlagschatten, nicht jedoch den Kastenschatten beeinflusst.

.bk {
    Hintergrundfarbe: #ffcc66;
}

.bk-alpha {
    Hintergrundfarbe: rgba(255, 204, 102, 0,3);
}

Bildrand

Aus dem Beispiel wissen wir, dass Schlagschatten die unregelmäßige Form des Bildrands widerspiegeln können, während Box-Shadow den Rand direkt als festen Rahmen behandelt und die Form des Randbildes ignoriert. Die Eule im Bild ist eine transparente PNG-Datei. Der Schlagschatten spiegelt nicht nur die Form des Rahmenbildes wider, sondern auch die Form der Eule innerhalb des Rahmens. Der Kastenschatten folgt dem einheitlichen Prinzip und behandelt den Rahmen und das Bild als vollständiges Quadrat.

.rahmen {
    Breite: 286px;
    Höhe: 240px;
    -moz-border-image: URL (Frame_green_.png) 25 25 wiederholen;
    -webkit-border-image: URL (Frame_green_.png) 25 25 wiederholen;
    Rahmenbreite: 25px;
    Rahmenbild: URL (Rahmen_grün_.png) 25 25 wiederholen;
    Rahmenfarbe: #79b218;
    Rahmenstil: Einschub;
    Rahmenbreite: 25px;
    Box-Größe: Rahmenbox;
    Anzeige: Block;
    Rand: 10px;
}

Pseudoelemente

Der Schlagschatten des Pseudoelements kann die Form des Pseudoelements widerspiegeln, während der Kastenschatten das Pseudoelement ignoriert.

.Zusatz {
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: #ffcc66;
    Rand: 10px 60px;
    Position: relativ;
    Anzeige: Inline-Block;
}

.addition:vor {
    Breite: 50px;
    Höhe: 50px;
    Hintergrundfarbe: #ff8833;
    Inhalt: '';
    Anzeige: Block;
    Position: absolut;
    links: 0;
    oben: 50 %;
    Rand links: -40px;
    transformieren: drehen (45 Grad);
    Rand oben: -10px;
}

.Zusatz:nach {
    Breite: 60px;
    Höhe: 60px;
    Hintergrundfarbe: #ff8833;
    Rand: 10px;
    Inhalt: '';
    Anzeige: Block;
    transformieren: drehen (20 Grad);
    transformieren: schräg(20 Grad, 20 Grad);
    oben: 5px;
    rechts: -40px;
    Position: absolut;
}

Kleine Blöcke innerhalb eines Blocks

Der Schatten des Schlagschattens kann die Form aller Elemente im Block widerspiegeln, während der Box-Schatten den rechteckigen Schatten des Blocks direkt widerspiegelt.

.Quadrat {
    Breite: 50px;
    Höhe: 50px;
    Anzeige: Inline-Block;
    Hintergrundfarbe: #ffcc66;
    Rand: 20px;
}
.Kreis {
    Breite: 50px;
    Höhe: 50px;
    Anzeige: Inline-Block;
    Randradius: 50 %;
    Hintergrundfarbe: #ff8833;
    Rand: 20px;
}

<div Klasse="demo-wrap">
    <div Klasse="Schlagschatten">
        <span class="square"></span>
        <span class="circle"></span>
        <p>Schlagschatten</p>
    </div>
    <div Klasse="Boxschatten">
        <span class="square"></span>
        <span class="circle"></span>
        <p>Kastenschatten</p>
    </div>
</div>

Unterschiede zwischen Schlagschatten und Kastenschatten

Schlagschatten verfügen nicht über die Eigenschaften eines inneren Rands (eingefügter Schatten) und einer Entfernung (Ausbreitung). Was die Unterstützung betrifft, unterstützt der Internet Explorer derzeit die Drop-Shadow-Eigenschaft nicht, während alle Browser Box-Shadow grundsätzlich unterstützen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.