CSS: Wie stelle ich die Transparenz von Box-Shadow ein?

Heute habe ich herausgefunden, dass die Verwendung des Box-Shadow-Attributs sehr gut einen Schatteneffekt zu p hinzufügen kann, aber wenn der zusätzliche Effekt so ist:

-moz-box-shadow:0 4px 4px #999; 
-webkit-box-shadow:0 4px 4px #999; 
box-shadow:0 4px 4px #999;

Die mit # eingestellte Farbe hat keinen transparenten Effekt. Stellen Sie die Farbe des Schattens auf diese Weise ein. Wenn die Stelle, an der der Schatten fällt, nicht weiß oder sogar dynamisch ist, z. B. wenn er auf eine Folie fällt, drehen sich mehrere Bilder unterschiedlicher Farbe. Wenn Sie dann die Schattenfarbe so einstellen, sieht der Schatteneffekt falsch aus!

Lösung: Verwenden Sie stattdessen RGBA.

-moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
-webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
box-shadow:0 4px 4px rgba(0, 0, 0, 0.4);

Ich möchte hier erklären:

ie6 und ie7 sollten das Box-Shadow-Attribut nicht unterstützen.

Sie können verwenden: *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#888888"); anstelle von

Seit dem von mir festgelegten Schatten ist nicht Es ist nicht erforderlich, in allen Browsern angezeigt zu werden. Deshalb habe ich diese Codezeile nicht hinzugefügt, also habe ich nicht überprüft, ob es möglich ist, die Farbe in Color="#888888" hier durch RGBA zu ersetzen. Das ist wahrscheinlich ziemlich ärgerlich !

Meine Grundsätze:

Solange es keine Probleme wie Layout-Fehlausrichtungen gibt, werde ich keine Kompatibilitätsänderungen vornehmen.

Für die wenigen Hartgesottenen, die ihre Browser nicht aktualisieren, besteht keine Notwendigkeit, eine Zeile redundanten Codes hinzuzufügen. Da Sie eine alte Version des Browsers verwenden, ist der Effekt, den Sie sehen, sicher ist nicht schön genug.

Der Grund, warum viele alte Versionen von IE-Browsern heute noch existieren, liegt darin, dass sie an das Frontend gewöhnt sind!

Das obige ist der detaillierte Inhalt vonCSS: Wie stelle ich die Transparenz von Box-Shadow ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!