Ombra esterna su un contenitore div?

Question

Ho una casella di ricerca con suggerimento automatico che fa apparire un div in basso con più suggerimenti per le stringhe di ricerca (come google). È possibile avere un'ombra esterna sulla casella di suggerimento automatico con CSS o avrò bisogno di uno script di qualche tipo? Ho provato un'immagine di sfondo ma il numero di suggerimenti può variare da 1 a 10 o 15.

Preferirei qualcosa che funzioni in IE6 + e FF2 + se possibile. Grazie!

Answer 1

CSS3 ha una proprietà box-shadow. Al momento sono richiesti i prefissi dei fornitori per la massima compatibilità del browser.

div.box-shadow { 
    -webkit-box-shadow: 2px 2px 4px 1px #fff; 
    box-shadow: 2px 2px 4px 1px #fff; 
} 

C'è un generatore disponibile a css3please.

Answer 2

Il modo più compatibile per farlo è probabilmente quello di creare un secondo div sotto la casella di auto-suggerimento delle stesse dimensioni della scatola stessa, spostata di alcuni pixel verso il basso e verso destra. Puoi usare JS per crearlo e posizionarlo, il che non dovrebbe essere terribilmente difficile se stai usando un framework abbastanza moderno.

Answer 3

Puoi provare a utilizzare le ombre esterne PNG. IE6 non lo supporta, tuttavia si degrada piacevolmente.

http://www.positioniseverything.net/articles/dropshadows.html

Answer 4

si potrebbe desiderare di provare questo. Sembra essere piuttosto facile e funziona su IE6 e Moz atleast.

<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div> 

La sintassi generale è: border-[postion]: [border-style] [border-width] [border-color] | ereditare

L'elenco dei disponibili [in stile confine] s sono:

• tratteggiata
• punteggiato
• doppia
• scanalatura
• nascosto
• inserto
• nessuno
• outse t
• cresta
• solido
• ereditare

Answer 5

Questo funziona per me su tutti i miei browser:

.shadow { 
-moz-box-shadow: 0 0 30px 5px #999; 
-webkit-box-shadow: 0 0 30px 5px #999; 
} 

poi basta dare qualsiasi div classe ombra, senza jQuery richiesto.

Answer 6

.shadow { 
    -moz-box-shadow: 3px 3px 5px 6px #ccc; 
    -webkit-box-shadow: 3px 3px 5px 6px #ccc; 
    box-shadow:   3px 3px 5px 6px #ccc; 
}