Durante l'utilizzo di CSS3 box-shadow Ho riscontrato un problema che in genere non ho.box-shadow interrotto
L'ombra del riquadro di solito si sovrappone ai bordi div, ma non su questo.
box-shadow che viene tagliata sulla parte superiore e la mano destra ..
Heres il css che sto utilizzando per box-shadow:
-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
box-shadow: 0 0 5px #555;
Acclamazioni
Se box-shadow è essere cut-off, assicurarsi overflow:visible è impostato su qualsiasi div (s) il vostro elemento è contenuto in.
Il problema è il tuo centro-principale div è tagliato fuori dal bordo dell'ombra. Impostare overflow:visible su questo e dovresti vederlo.
Grazie, ho pensato che questo fosse il problema ma non l'ho visto. Sei incredibile. –
Felice di aiutare :) – quoo
è possibile impostare questo tag img style per lo show ombra-box correttamente
.img{
margin:20px;
-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
box-shadow: 0 0 5px #555;
}
Ovviamente, cambierebbe anche il posizionamento dell'immagine. – quoo
Ho incontrato più volte questo problema con IE e la soluzione migliore che ho trovato è quella di utilizzare un contorno trasparente attorno al div. Ciò sembra impedire a IE di ritagliare l'ombra della casella, come accade anche nei casi in cui Gecko e Webkit non lo fanno. Una cosa grandiosa dell'utilizzo di outline per risolvere questo problema è che non influisce sulla posizione del div.
Per esempio, ho avuto un div con il quale avevo usato position: absolute e fondo: -30px per dirla in un certo luogo rispetto al suo div genitore. IE, e solo IE, stava tagliando la parte superiore e inferiore dell'ombra della scatola. L'aggiunta di questo schema lo ha risolto, senza cambiare la posizione.
outline: 10px solid transparent;
Ho eliminato il link del sito di esempio nel post originale, quindi lascerò questa spiegazione per le persone che hanno questo problema in futuro. –