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

Question

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

Answer 1

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

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

Answer 2

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

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-индекс: 1" DIV по своему вкусу.

Answer 4

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

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