Re: Drop shadow on top and bottom of element? Please help!

[Anonymous]

I’ve got it! If you don’t have an element above and below for @dfogge’s method to work here’s another solution, although it does require extra markup.

See the below CSS.

#main {

width: 100%;

height: 400px;

background: #FFFFFF;

position: relative;

margin: 0 auto;

overflow: hidden;

}

.inner-main {

margin: 6px 0;

-webkit-box-shadow: 0 8px 6px -6px black,

-moz-box-shadow: 0 8px 6px -6px black;

box-shadow: 0 8px 6px -6px black;

}

If you apply the box-shadow to a div inside #main and set #main to overflow: hidden; you can effectively hide the drop shadow. Then just apply a top and bottom margin to the inside div equal to the spread of the drop shadow.

Hope this helps!