title: Why doesn't inset box-shadow work over images?
body: <p>I have a container that uses inset box shadow. The container contains images and text. The inset shadow apparently does not work on images:</p>
  
  <p><img src="https://i.stack.imgur.com/FWOeR.png" alt="The problem"></p>
  
  <p>The white section here is the container. It contains a white image, and there is inset box shadow applied to it.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;main&gt;
      &lt;img src="whiteimage.png"&gt;
  &lt;/main&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>body {
      background-color: #000000;
  }
  
  main {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 90%;
      height: 90%;
      background-color: #FFFFFF;
      box-shadow: inset 3px 3px 10px 0 #000000;
  }
  </code></pre>
  
  <p>Is there a way to make the inset box shadow overlap images?</p>
  
  <p><a href="http://jsfiddle.net/tMTf9/" rel="noreferrer">Live demo</a></p>