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

Question

Я смотрю все уроки CSS Drop shadow, которые великолепны. К сожалению, мне нужно нанести тень на три стороны элемента блока (слева, снизу, справа). Все учебники говорят о смещении вашего блочного элемента вверх и влево. У кого-нибудь есть понимание, как нанести тень на три или даже четыре стороны?

Answer 1

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

Answer 2

Псевдо 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>

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

Answer 3

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

<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>

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

Answer 4

Спасибо всем. То, как я это сделал, было как-то так:

<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>