box-shadowで画像(img要素)に影を落とす

素直にやると、img要素の上には、box-shadowでinset指定しても影が落ちません。

そこで、z-indexで調整してimg要素を下のレイヤーに持って行くと、box-shadowで影が落ちるようになります。box-shadowだけじゃなくて色々使えるテクニックです

<div class="image-box">
      <div class="shadow">
        <img src="http://octodex.github.com/images/megacat-2.png"/>
      </div>
</div>

.image-box {
      margin-top: 100px;
      position: relative;
      z-index: 1;
      
}
.image-box .shadow {
      -moz-box-shadow: inset 0px 0px 12px rgba(0,0,0,.6);
      -webkit-box-shadow: inset 0px 0px 12px rgba(0,0,0,.6);
      box-shadow: inset 0px 0px 12px rgba(0,0,0,.6);
}
.image-box .shadow img {
      position: relative;
      z-index: -1;
}