Apply drop-shadow to only two sides of a <div>. Possibly with css3 gradients & border-image?

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.

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.

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.

Can anyone help?

He开发者_开发问答re's the page, in case you'd want to take a look. I'm trying to make do this on the image slider.

http://designsweeter.com/

---

You can have multiple box-shadows, comma separated. I guess it's easy for you to figure it out from here, if not I can elaborate.

---

Take a look at the solution proposed here. They fake a gradient with several border colors, you could use rgba() for those to simulate transparency.

You won't be able to have a clean cross browser implementation as Firefox 5 still needs an actual url() parameter for the border image attribute.

Your best shot would be to use CSS masks (Webkit only)

---

Here I tried styling surrounding elements to drop the shadow over the content. It's not pretty and hard to scale but I think it looks like what you describe.

It uses w dives on the sides to add the lateral shadows, and an extra div at the bottom to cover the lower shadow of the divs.