Detaillierte Erklärung des Unterschieds und der Anwendung von CSS3-Filtern: Schlagschattenfilter und Box-Shadow

Um mit Standard-CSS3 den Schatteneffekt eines Elements zu erzielen, gibt es zwei Routinen. Die erste besteht darin, den üblichen box-shadow zu verwenden, und die zweite darin, den CSS3- filter Shadow Filter drop-shadow zu verwenden. Was sind die spezifischen Unterschiede zwischen diesen beiden Schattenimplementierungen?

1. Die Kompatibilität variiert

CSS3- box-shadow wird seit IE9 unterstützt und die Kompatibilität wird im folgenden Screenshot gezeigt:

drop-shadow filter auf Mobilgeräten nur im IE13 und in Android 4.4 unterstützt. Die Kompatibilität ist wie folgt dargestellt:

2. Dieselben Parameterwerte haben unterschiedliche Auswirkungen auf die Leistung

Die drop-shadow im filter lautet wie folgt:

Filter: Schlagschatten (X-Versatz, Y-Versatz, Unschärfegröße, Farbwert);

Filter: Schlagschatten (5px 5px 10px schwarz)

Stellt einen schwarzen Schatten dar, der 5 Pixel nach rechts unten verschoben und um 10 Pixel unscharf ist. Sehen heißt glauben. Eine Veranschaulichung hierzu finden Sie im Bild unten.

Wenn Sie jedoch box-shadow mit denselben Parameterwerten verwenden, zum Beispiel:

Box-Schatten: 5px 5px 10px schwarz;

Sie werden feststellen, dass die Schattendistanz des box-shadow kleiner und der Farbwert dunkler ist:

3. Schlagschatten hat keinen inneren Schatteneffekt

box-shadow unterstützt inset Schatten wie:

Box-Shadow: Einschub 5px 5px 10px schwarz;

Bei drop-shadow ist dies jedoch nicht der Fall.

4. Schatten vs. Kastenschatten

drop-shadow ist eine sehr leistungsstarke Funktion und diese eine Funktion gibt ihm genügend Möglichkeiten, in Zukunft zu glänzen! Das heißt, drop-shadow ist die echte Projektion, während box-shadow lediglich ein Kastenschatten ist.

Was bedeutet das?

Verwenden wir beispielsweise einen CSS- border , um ein gepunktetes Kästchen zu schreiben:

 Rand: 10px gestrichelt #fa608d;
    Höhe: 50px;
    Breite: 50px; 

Anschließend wenden wir box-shadow und drop-shadow -Filter jeweils an:

Box-Schatten: 5px 5px 10px schwarz;
 Filter: Schlagschatten (5px 5px 10px schwarz);

Kastenschatten:

Filter: Schlagschatten:

box-shadow ist, wie der Name schon sagt, nur der Schatten der Box. Denken Sie darüber nach, die Mitte der Box ist transparent, aber wenn sie einen Schatten wirft, kann das Licht nicht durchdringen. drop-shadow entspricht jedoch der Projektion in der realen Welt. Für nicht transparente Farben habe ich eine Projektion; für den transparenten Teil geht das Licht ohne Projektion durch, und ob es eine Box ist oder nicht, hat nichts mit mir zu tun.

drop-shadow können nicht nur die transparenten Teile von durch Code erstellten Elementen durchdringen, sondern auch die transparenten Teile von PNG-Bildern, wie unten gezeigt:

6. Praktische Anwendung von Schlagschatten

Wenn wir das schwebende Panel mit darauf zeigenden Pfeilen implementieren, werden die Dreiecke aus Kompatibilitätsgründen grundsätzlich mit border gezeichnet und box-shadow kann nicht verwendet werden. Der Designer hofft jedoch, dass der rechteckige Teil einen Schatten hat.

Der Pfeil hat keinen Schatten und kann getarnt werden. Mit drop-shadow wird der Schatten nun wirklich zu einem Schatten.

CSS Code:
.Kasten {
    Rand: 40px; Abstand: 50px;
    Hintergrundfarbe: #fff;
    Position: relativ;
    Schriftgröße: 24px;
}
.cor {
    Position: absolut;
    links: -40px;
    Breite: 0; Höhe: 0;
    Überlauf: versteckt;
    Rand: 20px durchgehend transparent;
    Rahmenfarbe rechts: #fff;
}
.box-shadow {
    Box-Schatten: 5px 5px 10px schwarz;
}
.Schlagschatten {
    Filter: Schlagschatten (5px 5px 10px schwarz);
}
HTML Quelltext:
<div Klasse="Box Box-Schatten">
    <i Klasse="cor"></i>
    Kastenschatten
</div>
<div Klasse="Box Schlagschatten">
    <i Klasse="cor"></i>
    Filter: Schlagschatten
</div> 

Dies ist das Ende dieses Artikels über die Unterschiede und Anwendungen von CSS3-Filtern: Schlagschatten und Boxschatten. Weitere verwandte Inhalte zu CSS3-Filtern: Schlagschatten und Boxschatten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder weiter unten in den verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!