title: Cross-browser dropshadows on boxes
body: <p>I am building a new site which has drop shadows on various page elements (boxes, inputs etc). The site as a whole needs to be the same across all browsers (back to IE7).</p>
  
  <p>My issue lies with the best way to implement these drop shadows on many different elements on new and old browsers.</p>
  
  <p><img src="https://i.stack.imgur.com/5vJnK.png" alt="enter image description here"></p>
  
  <p>I am aware of the css3 solution with no images: <code>box-shadow: 1px 1px #333</code> - but this won't degrade well.</p>
  
  <p>I don't really want to use images for every element as we would be looking at 4 images per element and requests to the server and page load time would get ridiculous just for a simple effect.</p>
  
  <p>Is it possible to even create a fallback say: <em>If the browser doesn't support box-shadow, use images</em>? Only issue I see with this is lots of extra mark up which can make it harder to manage.</p>
  
  <p>I guess the difficulty here is the requirement "I want it modern but to degrade nicely".<br>
  <strong>What solution is best for me when implementing drop shadows (is there an alternative) ?</strong></p>