三面的CSS阴影

Question

我在看所有的CSS Drop阴影教程，这很棒。不幸的是，我需要在块元素的左侧（左侧，底部，右侧）放置一个阴影。所有的教程都讲述了如何将块元素向左和向右移动。任何人都可以洞察三个甚至四个方面的影子吗？

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

您需要的阴影尺寸播放。在上面的例子中，阴影比元素稍高，所以阴影显示在上面，它稍微向左偏移，所以阴影显示在右边，它比元素略大，所以阴影显示在下面。