title: Apply drop-shadow to only two sides of a <div>. Possibly with css3 gradients & border-image?
body: <p>I'm trying to create an effect that shows a div sort-of disappearing into the content background. The idea is that there is a simple border: 1px #000 solid; on the top and bottom of the div, then a large inset shadow on the left and right to give the appearance that the div continues back behind the page, as if there is a slit in the background which the div can travel through.</p>
  
  <p>Box-shaodw currently only work on all sides at once. So I need a way to get a large shadow on the left and right, but still be able to access the content beneath the shadow. That's the glory of css shadows, you can. An image simply will not work because then you wouldn't be able to click under it.</p>
  
  <p>Someone on this post suggested using border-image and putting a css3 gradient into it. It's hurting my brain, I start to get very confused when trying to place a css3 gradient into the border on one side of a div.</p>
  
  <p>Can anyone help?</p>
  
  <p>Here's the page, in case you'd want to take a look. I'm trying to make do this on the image slider.</p>
  
  <p><a href="http://designsweeter.com/" rel="nofollow">http://designsweeter.com/</a></p>