Internet Explorer - CSS Ombra All Around

Question

sono stato strappando i capelli fuori sopra questo problema, voglio una semplice ombra che fa in giro per l'intero elemento, oltre che per la parte superiore. L'ho fatto funzionare su Firefox e Chrome senza alcun problema. Ma IE ha questa strana impostazione di "direzione" dove l'altro come 4 numeri per definire l'ombra.

Qualcuno può aiutarmi a definire il giusto CSS in modo che avrà un'ombra intorno l'intero elemento oltre la cima.

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

Il filtro ombra è unidirezionale, e la direzione è un numero tra 1 e 360 ​​gradi. Per generare una scatola di ombra con la possibilità di compensare quell'ombra, avrete bisogno di uso più filtri d'ombra:

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

Questo è ordinato in alto/a destra/basso/sinistra, e variando la forza su ogni lato cambierà la dimensione di quell'ombra. Ad esempio, 2 5 5 10 produrrà un'ombra discendente diretta che dà l'illusione di altezza.

Answer 2

Prova il filtro "glow" invece:

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

Simile a risposta di cui sopra (vedi nota sotto):

#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: Tenete a mente c'è anche un bug in IE, dove si applicherà lo stesso stile di elementi figlio. Quindi potresti dover applicare un "contatore"/"Nullificatore" se vuoi.

Esempio:

#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

ci sono soluzioni qui: http://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ combinando i filtri bagliore e di sfocatura che sembrano significativamente migliore, per citare uno degli esempi di codice nella pagina sopra:

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