Browserübergreifender Box-Shadow

    Hallo liebe Leser. Heute möchte ich Ihnen einen äußerst einfachen Weg zur browserübergreifenden Implementierung der Box-Shadow-CSS-Eigenschaft vorstellen. Die Methode ist so einfach und offensichtlich, dass ich sehr überrascht war, dass ich im Internet keine ähnliche Lösung finden konnte (obwohl ich mehr als sicher bin, dass ich kein Pionier bin).



    Für den Anfang ist CSS also für normale Browser.
    Copy Source | Copy HTML
    1. div {
    2.     background: green; /* обязательно для ie */
    3.     -webkit-box-shadow: 0px 0px 15px #222;
    4.     -moz-box-shadow: 0px 0px 15px #222;
    5.     box-shadow: 0px 0px 15px #222;
    6. }

    Das Wesentliche bei der Implementierung der Box-Shadow-Eigenschaft für ie besteht darin, den Schattenfilter viermal mit unterschiedlichen Richtungswerten anzuwenden. Der Schatten fängt also an, den gesamten Umriss des Containers zu umrahmen.
    Copy Source | Copy HTML

    Einige Nuancen, die es wert sind, beachtet zu werden:
    • Der Schatten wird bei Verwendung des Filters dunkler. Um eine Identität zu erzielen, müssen Sie daher mit den Farb- und Stärkeparametern herumspielen
    • IE erhöht die Blockgröße um die Breite des Schattens, und da wir für jede Seite im Wesentlichen zwei Schatten haben, verdoppelt sich die Größe. Das heißt Am Ende müssen wir den Block relativ nach links und oben verschieben, entsprechend der Formel left = top = - (strength * 2)
    • IE6 und IE7 erfordern hasLayout, daher setzen wir zoom: 1 für sie (oder die Breite, Höhe und andere Eigenschaften, die hasLayout zuweisen)
    • Für den Block muss der Hintergrund festgelegt werden, sonst wird der Filter auf die untergeordneten Elemente angewendet

    Nachteile:
    • Filter sind immer zusätzliche Bremsen
    • IE deaktiviert das Anti-Aliasing von Text in einem Block mit Filtern
    • Der Schatten im IE unterscheidet sich in der Form vom Schatten in anderen Browsern (mehr Platz)
    • AlphaImageLoader funktioniert in dem so erstellten Block nicht mehr (möglicherweise habe ich auch andere Filter nicht überprüft)

    Das letzte Beispiel .

    Das ist alles. Vielen Dank für Ihre Aufmerksamkeit.

    Jetzt auch beliebt: