BoxShadow: inserto sul tag img

Question

Sto provando a creare un effetto rilievo su un'immagine (come una polaroid). quindi dovrebbe esserci un'ombra di scatola in alto e il bordo sinistro inserito nell'immagine. Ma non funziona ... questo è un problema del browser:

Ho creato un jsfiddle http://jsfiddle.net/PEgBv/25/ per mostrare quello che voglio.

Mi piace come nella seconda casella di divisione (dove funziona). Ma sulle immagini, l'ombra viene visualizzata solo senza l'attributo inset.

Lavorare con chrome14 su linux

Answer 1

ombre CSS3 inserto non funzionano sulle immagini, ma c'è una soluzione alternativa,

Controllare qui: http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/

Answer 2

La soluzione non è così lavorare per le immagini con max-width: 100%; e height: auto; che vengono spesso utilizzate nei disegni fluidi per rendere le immagini in scala automaticamente fino a raggiungere la loro larghezza originale. Per rendere l'ambiente circostante <a> (o qualsiasi altro elemento) espandere per coprire tutto il contenuto (l'immagine) è necessario aggiungere display: blocco in linea; ad esso, altrimenti l'ombra non mostrerà come previsto.

Quindi, oltre agli stili nella soluzione proposta, è necessario aggiungere display: inline-block; alla classe .img-shadow.

Answer 3

Funzionerà se si utilizza l'immagine su uno sfondo. Quindi, invece di usare il tag img, usa background-image: url(source.jpg); in un file css o in uno stile. Box-shadow viene visualizzato sopra l'immagine di sfondo.