box-shadow en img en CSS

Es posible agregar una sombra al atributo img en CSS, lo intenté y parece que no funciona. Estoy en lo correcto o mi código es sólo la patabox-shadow en img en CSS

CSS

.image_carousel img { 
    padding-right: 14px; 
    display: block; 
    float: left; 
    box-shadow: 3px 3px 1px #ccc; 
    -webkit-box-shadow: 3px 3px 1px #ccc; 
    -moz-box-shadow: 3px 3px 1px #ccc; 
}

HTML

<div class="image_carousel"><img src="../imgs/image.jpg" width="800" height="600" alt=""/></div>

Fuente

2011-08-03 Warface

¿Por qué la anchura y altura en el HTML difieren de los de la CSS? ¿Estás seguro de que la sombra no está solo fuera de la pantalla o algo así? –

El código es casi correcto (M. Cypher tiene razón sobre el tamaño de img), pero ¿cuál es su navegador? Tu código debe ser compatible (si no me equivoco) con IE 9+, las últimas versiones de Chrome, Opera 10.50+, Firefox 3.5+, Safari 3.1+. – VIK

parece que se puede:

.image_carousel img { 
 
    margin-right: 14px; 
 
    display: block; 
 
    float: left; 
 
    box-shadow: 3px 3px 1px #ccc; 
 
    -webkit-box-shadow: 3px 3px 1px #ccc; 
 
    -moz-box-shadow: 3px 3px 1px #ccc; 
 
}

<div class="image_carousel"><img src="//placehold.it/300/f80/fff" alt=""/></div>

Fuente

2011-08-03 18:04:27

De acuerdo con specification, box-shadow se aplica a todos los elementos. Pero esta es la especificación CSS3, por lo que sólo un puñado de navegadores apoyará todo por ahora:

IE9
FF4
Opera 10.5
Safari 3
Chrome 1

son los que vienen a la mente ahora

Fuente

2011-08-03 18:07:01 kaveman

img.carousel {box-shadow: 3px 3px 1px #ccc;} /*works fine 

<img src="whatever.png" class="carousel">

o probar por diversión

img.carousel {border:1px solid #ccc;} 

img.carousel:hover {box-shadow: 3px 3px 10px #ccc;}

Fuente

2017-01-05 02:34:34 Kickenback61

<style> 
img { 
    -webkit-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.41); 
    -moz-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.41); 
    box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.41); 
} 
</style> 
<img src="http://jadide.ir/wp-content/uploads/2016/06/2.jpg" alt=""/>

Fuente

2017-03-27 10:58:38

box-shadow en img en CSS

Respuesta

Cuestiones relacionadas