三面的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> 

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