css:box-shadow の透明度を設定するにはどうすればよいですか?

今日、box-shadow 属性を使用すると p にシャドウ効果を非常にうまく追加できることを発見しましたが、追加された効果が次の場合:

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

# を使用して設定されたカラーには透明効果がありません。この方法で影の色を設定します。影が落ちた場所が白でない場合、または影がスライド上に落ちた場合など、異なる色の複数の画像が回転します。このように影の色を設定すると、影のエフェクトがフェイクっぽくなります！

解決策: 代わりに 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);

ここで説明したいと思います:

ie6 と ie7 は box-shadow 属性をサポートすべきではありません。

代わりに次を使用できます: *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#888888");

私が設定した影は表示されるすべてのブラウザーで必要ではないためです。したがって、このコード行を追加しなかったので、ここで Color="#888888" の色を rgba に置き換えることが可能かどうかは検証しませんでした。必要な場合は自分で検証できると思います。迷惑だ！

私の原則:

レイアウトのズレなどの問題がない限り、互換性の修正は行いません。

ブラウザをアップグレードしない少数の熱心なユーザーの場合は、冗長なコードを 1 行追加する必要はありません。古いバージョンのブラウザを使用しているため、表示される効果が美しくないことは確かです。十分。

古いバージョンの IE ブラウザが今でも多く存在しているのは、フロントエンドに慣れているからです。

以上がcss:box-shadow の透明度を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。