css嵌入框陰影頂部，左側，右側，底部圖像

我需要在頂部，右側和左側有一個陰影框，底部有一個圖像。我想是這樣的：css嵌入框陰影頂部，左側，右側，底部圖像

container 
    child-container

給頂部邊界展現給容器：

box-shadow: 0 5px 5px rgba(0, 0, 0, 0.23) inset; 
padding: 8px 0 6px; 
background: url("../bottom_image.gif") no-repeat scroll center bottom #FFFCD8;

和孩子，給左，右插圖陰影：

box-shadow: 5px 0 5px -5px #999999 inset, -5px 0 5px -5px #999999 inset; 
padding: 0 25px;

但有在子容器頂部提到的一行。

任何人都可以告訴我適當的方式來做到這一點嗎？

來源

2011-12-21 Ha0710

你能幫助我們瞭解你的目標更好一點（如例子） – c4urself 2011-12-21 17:24:06

HTML例子是非常有幫助的 – PseudoNinja 2011-12-21 18:04:27

試試這個：

jsFiddle

.container { 
    box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.23) inset; 
    padding:8px 25px 0; 
    background: url("../bottom_image.gif") no-repeat scroll center bottom #FFFCD8; 
} 

<div class="container"> 
    <div class="child-container">FooBar</div> 
</div>

來源

2011-12-21 18:11:25 PseudoNinja

感謝@ Oldcode101。它的效果非常好，只需要修改圖像以覆蓋圖像的左右角。 – Ha0710 2011-12-22 09:32:39

css嵌入框陰影頂部，左側，右側，底部圖像

回答

相關問題