box-shadow on img in CSS

Is it possible to add a shadow to the img tag in CSS, I tried and it doesn't seems t开发者_StackOverflowo work. Am I correct or my code is just messed up

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>

---

looks like you can:

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

---

According to the specification, box-shadow applies to all elements. But this is the CSS3 spec, and so only a handful of browsers will support it for now:

• IE9
• FF4
• Opera 10.5
• Safari 3
• Chrome 1

are the ones that come to mind now

---

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

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

or try for fun

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

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

---

<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=""/>