Internet Explorer - CSS Shadow All Around

Question

私はこの問題で私の髪の毛を裂いてきました。 FirefoxとChromeで問題なく動作するようになった。しかし、IEには、この奇妙な "方向"の設定があり、影を定義する4つの数字として他のものを使用します。

誰かが適切なCSSを定義して、上部以外の要素全体に影ができるようにすることができますか？

/* For Firefox and Chrome */ 
-moz-box-shadow: 0px 0px 7px #000; 
-webkit-box-shadow: 0px 0px 7px #000; 
box-shadow: 0px 0px 7px #000; 

/* for IE */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=600, Color='#000000')"; 

Answer 1

をシャドウフィルタは、単方向であり、方向が1と360度の間の数です。ボックスはその影を相殺する能力を影生成するには、使用する複数のシャドウフィルタが必要になります。これは、ソートされ

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0), 
    progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90), 
    progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180), 
    progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270); 

トップ/右/下/左、およびいずれかの側に強さを変えますその影の大きさを変更します。たとえば、2 5 5 10は、真っ直ぐなドロップシャドウを生成し、高さの錯覚を与えます。上記回答と同様に

Answer 2

代わりに "グロー" フィルタを試してください。

http://msdn.microsoft.com/en-us/library/ms532995(v=VS.85).aspx

DIV.aFilter { 
    filter:progid:DXImageTransform.Microsoft.Glow(Color=blue,Strength=5); 
    width: 150px;} 

Answer 3

（下記の注を参照）：

#boxContainer{ 
    filter: 
     progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#000000'), 
     progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#000000'), 
     progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#000000'), 
     progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=270, Color='#000000'); 
} 

重要： は、それが子要素に同じスタイルを適用しますIEのバグでもあります覚えておいてください。そうすれば "カウンター"/"ヌルリファイア"を適用する必要があるかもしれません。

例：

#boxContainer button, #boxContainer div, #boxContainer span { 
    /* Nullify Inherited Effect - Set "Strength=0" */ 
    filter: 
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=0, Color='#000000'), 
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=90, Color='#000000'), 
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=180, Color='#000000'), 
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=270, Color='#000000'); 
} 

Answer 4

ソリューションがここにあります http://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ は、かなりよく見える輝きとぼかしフィルターを組み合わせた上でページ上のコードサンプルの一つを引用する：

.shadowed .shadow-3 
{ 
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0) 
progid:DXImageTransform.Microsoft.Alpha(opacity=25) 
progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true'); 
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)" 
"progid:DXImageTransform.Microsoft.Alpha(opacity=25)" 
"progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true')"; 
color: #111111; 
top: -2px; 
left: -2px; 
}