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

IE7 および IE8 のボックス シャドウ

CSS ボックス シャドウは、Web ページ上の要素に奥行きと次元を追加する強力な方法です。ただし、これらのシャドウは IE7 および IE8 ではサポートされていません。目的の効果を実現するには、HTML、CSS、JavaScript を組み合わせて使用​​できます。

CSS ソリューション

1 つのオプションは、CSS3 PIE ライブラリを使用することです。古いバージョンの IE で CSS3 プロパティをエミュレートできます。 PIE は (inset キーワードを除く) box-shadow をサポートしているため、これを使用して IE7 および IE8 の要素にボックス シャドウを適用できます。以下は使用できる更新された CSS です:

.bright{
    position: absolute;
    z-index: 1; 
    -moz-box-shadow: 0px -3px 55px 20px #147197;
    box-shadow: 0px -3px 55px 20px #147197;
    -webkit-box-shadow: 0px -3px 55px 20px #147197;
    behavior: url(ie-css3.htc);
}

ie-css3.htc ファイルをダウンロードして Web ページに含める必要があることに注意してください。

JavaScript による解決策

もう 1 つのオプションは、JavaScript を使用してボックス シャドウ効果を作成することです。 JavaScript ライブラリ BoxShadows.js を使用できます。これにより、IE7 および IE8 にボックス シャドウのサポートが追加されます。使用方法は次のとおりです:

<div class="bright"></div>

$(".bright").boxShadow({
    x: 0,
    y: -3,
    blur: 55,
    color: "#147197"
});

IE ブラウザの互換性

IE7 は CSS3 などの最新の機能をサポートしていないことに注意することが重要です。ボックスのシャドウなので、この効果を実現するにはポリフィルまたは JavaScript ソリューションを使用する必要があります。 IE8 は一部の CSS3 機能をサポートしていますが、すべてではありません。したがって、機能検出スクリプトを使用してどの機能がサポートされているかを判断し、それに応じて適切なフォールバック方法を使用する必要があります。

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