javascript - HTMLオブジェクトに影を落とす

Question

選択したHTML要素（入力テキスト、select、divなど）にドロップシャドウ効果を適用しようとしています。

多くのインターネットユーザーによって提供されたソリューションは、CSS3ソリューションを使用していました。

-moz-box-shadow
-webkit-box-shadow
box-shadow

ただし、これはIE8（おそらく他のIEバージョン）では機能しません

これらのCSS3要素を使用せずにこの効果を作成する方法はありますか？

Answer 1

このcssをie-8に使用します

.shadow
{
width:300px;
height:200px;
background-color:red;

filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=3)
}

Answer 2

ばかばかしいほどクロスブラウザソリューションにはCSS3パイを使用してください。

Answer 3

CSS3なしでそれをどのように行うことができるかはよくわかりませんが、私が知っていることは

.shadow { 
-moz-box-shadow: 3px 3px 4px #000; 
-webkit-box-shadow: 3px 3px 4px #000; 
box-shadow: 3px 3px 4px #000; 
/* For IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
/* For IE 5.5 - 7 */ 
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 
}

すべてのブラウザで動作します。