CSS тени с трех сторон

сделайте элемент блока больше / выше, чтобы он превышал желаемые стороны.

Вот один из способов сделать это:

<div style='position:relative;'>
    <div style='position:absolute;top:10px;left:10px;width:300px;height:100px;z-index:1;background-color:#CCCCCC'></div>
    <div style='position:absolute;top:0px;left:0px;width:300px;height:100px;z-index:2;background-color:#00CCFF'>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at felis. Etiam ullamcorper.</p>
    </div>
</div>

Размер и положение DIV "z-index: 1" по своему вкусу.

Псевдо HTML

<div style = "position:absolute;top:8;left:12;width:200;height:204;background-color:#888888"></div>
<div style = "position:absolute;top:10;left:10;width:200;height:200;background-color:#FFFFFF">The element</div>

Вам нужно поиграть с размером тени. В приведенном выше примере тень немного выше, чем элемент, поэтому тень отображается сверху, она немного смещена влево, поэтому тень отображается справа, и она немного больше, чем элемент, поэтому тень отображается ниже.

Спасибо всем. В итоге я сделал это примерно так:

<div id = "top_margin"></div>
<div id = "left_right_shadow">this div has a 5 px tall repeating background that is a bit bigger than the width of my content block, shadow on the left, white space, shadow on the right
  <div id = "content">Content as normal</div>
</div>
<div id = "bottom_margin">This has the bottom shadow</div>