Internet Explorer - CSS Shadow All Around

Question

Me he estado rasgando los cabellos por este problema, quiero una sombra simple que hace todo el elemento, además de la parte superior. Lo tengo para trabajar en Firefox y Chrome sin ningún problema. Pero IE tiene esta extraña configuración de "dirección" donde, como el otro, 4 números para definir la sombra.

¿Alguien me puede ayudar a definir el CSS correcto para que tenga una sombra alrededor de todo el elemento además de la parte superior.

/* 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

El filtro de sombra es unidireccional, y la dirección es un número entre 1 y 360 grados. Para generar una caja de sombra con la capacidad para compensar esa sombra, necesitará el uso de varios filtros de sombra:

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); 

Esto se ordena la parte superior/derecha/abajo/izquierda, y la variación de la fuerza en cualquiera de los lados alterará el tamaño de esa sombra. Por ejemplo, 2 5 5 10 producirá una sombra paralela que da la ilusión de altura.

Answer 2

Prueba el filtro "resplandor" en lugar:

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

Al igual que en anteriores Respuesta (ver nota más abajo):

#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'); 
} 

Importante: Tenga en cuenta también que hay un error en el IE donde se aplicará el mismo estilo a elementos secundarios. Por lo tanto, es posible que deba aplicar un "contador"/"anulador" si lo desea.

Ejemplo:

#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

hay soluciones aquí: http://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ combinando los filtros de brillo y el desenfoque que se ven significativamente mejor, por citar uno de los ejemplos de código en la página anterior:

.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; 
}