title: Create an even shadow on a full-width element
body: <p>When a box-shadow is applied to an element the corners are less "thick" than the middle because they don't have shadow on both sides.  This creates an odd effect on full width elements.</p>
  
  <p><a href="http://jsfiddle.net/kevincox/6FhYe/18/" rel="nofollow">http://jsfiddle.net/kevincox/6FhYe/18/</a></p>
  
  <p>If you look at that example you will see that the edges are lighter.  If the "banner" is at the top of a page you can spread it and shift it up but that doesn't work for the middle of the page as you can see the top.</p>
  
  <p>I was wondering if anyone had a solution with no images and preferably cross-browser but I can deal with vendor prefixes for a bit.  Is there something like a separate horizontal and vertical stretch?</p>