title: Best way to do this kind of drop shadow?
body: <p>I have a site that will have a column of images and divs (a mix of both) that will always be the same size.</p>
  
  <p>On all of these I want to add a certain kind of drop shadow (as seen here):
  <img src="https://i.stack.imgur.com/KGFb4.jpg" alt="enter image description here"></p>
  
  <p>I've worked with CSS drop shadows but I've never seen one like this in CSS.  Can this be done in CSS?  Assuming it cannot then I'm guessing I would use just a drop shadow slice as a graphic, possibly a background.  If that is the only route to go, how do I apply this to every image or div?</p>
  
  <p>Right now what I'm doing is putting a div under each image or div:</p>
  
  <pre><code>&lt;div class="rightimgdropshadow"&gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>...and doing this in CSS:
  .rightimgdropshadow</p>
  
  <pre><code>{
      background-image: url(../images/site-structure/right-col-image-shadow.jpg);
      background-repeat: no-repeat;
      background-position: center top;
      width 100%
      height: 20px;
  }
  </code></pre>
  
  <p>Is there a better way to do this?  Thanks!</p>