IE7 および IE8 でボックス シャドウを作成するにはどうすればよいですか?

IE7 および IE8 のボックス シャドウ: 総合ガイド

IE7 および IE8 でボックス シャドウを実現するには課題が生じる可能性がありますが、実行可能な解決策はあります。 CSS3 PIEで。これらのブラウザで CSS3 プロパティをエミュレートすることで、CSS3 PIE を使用すると、開発者はボックス シャドウを簡単に実装できます。

ボックス シャドウの CSS コード

色付きのボックス シャドウをdiv 要素では、次の CSS を使用します:

.bright {
    position: absolute;
    z-index: 1; 
    box-shadow: 0px -3px 55px 20px #147197;
}

IE のみのソリューション

上記の CSS コードは IE9 以降で動作しますが、ボックスはサポートしていませんIE7 と IE8 のシャドウ。これに対処するには、

ie-css3.htc ファイル: このファイルは IE で基本的なシャドウ サポートを提供しますが、作成されるのは黒いシャドウのみです。

filter: progid:DXImageTransform.Microsoft.Shadow: このメソッドは指向性シャドウを作成しますが、全方向シャドウには理想的ではない可能性があります。

CSS3 PIE

IE7 および IE8 のボックス シャドウに対する最も効果的なソリューションは CSS3 PIE です。このツールは、HTML と JavaScript の組み合わせを使用して box-shadow プロパティをエミュレートします。 「inset」キーワードを除く box-shadow のすべてのプロパティをサポートします。

CSS3 PIE を使用するには、ライブラリをダウンロードして HTML ファイルに含めます。

<script src="PIE.htc"></script>

ライブラリを使用すると、通常どおりボックスの影を適用できます。 CSS3 PIE は、IE7 および IE8 でのエミュレーションを自動的に処理します。

結論

ボックス シャドウは、CSS3 PIE を使用して IE7 および IE8 に実装できます。このツールは、box-shadow プロパティの優れたサポートを提供し、Web 要素に視覚的な奥行きを追加するための信頼できるソリューションとなります。

以上がIE7 および IE8 でボックス シャドウを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。