can't get rid of top and bottom drop shadows

Question

Why with the following code, I still can't get rid of drop shadows at the top and bottom. Although the drop shadows are "small", yet still they are there.

div#inner_container {
 width: 960px;
 margin: 0 auto;
 background-color: rgb(255, 255, 255);
 box-shadow:0 9px 0 0 transparent,
            0 -9px 0 0 transparent,
            12px 0 15px -4px rgba(255, 255, 255, 0.5),
           -12px 0 15px -4px rgba(255, 255, 255, 0.5);
 position: relative;
 z-index: 5000;
}

Answer 1

Try this:

box-shadow: 10px 0px 12px -5px #ffffff, -10px 0px 12px -5px #ffffff;

Answer 2

It's not that there's a drop shadow on top, but that you set the spread so high it's bleeding to a point where you can see it:

box-shadow: 0 0px 0px 0px transparent,
            0 0px 0px 0px transparent,
            12px 0 9px -10px rgba(255, 255, 255, 0.5),
            -12px 0 9px -10px rgba(255, 255, 255, 0.5)

Try this. I'm sure this can be further simplified, though. It looks unnecessarily complex.

Answer 3

You can add top and bottom shadow which is the background color that will be placed on top of the bleeding shadow:

box-shadow:
0 -5px 0px 0 black,
0 5px 0px 0 black,            
12px 0 15px -4px rgba(255, 255, 255, 0.5),
-12px 0 15px -4px rgba(255, 255, 255, 0.5);

Or you can use :before, :after (CSS Drop Shadow)

Both examples: http://codepen.io/anon/pen/jEkwJ