css inset box shadow top,left,right, image at bottom答案

【问题标题】：css inset box shadow top,left,right, image at bottomcss inset box shadow top,left,right, image at bottom
【发布时间】：2011-12-21 17:06:51
【问题描述】：

我需要在顶部、右侧和左侧设置框阴影，并在底部设置图像。我试过这样：

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;

但是在子容器的顶部提到了一行。

谁能告诉我正确的做法？

【问题讨论】：

您能否帮助我们更好地了解您的目标（例如示例）
html 示例将非常有帮助

标签： css insets

【解决方案1】：

试试这个：

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>

【讨论】：

感谢@Oldcode101。效果真的很好，只需要稍微修改一下图片，覆盖图片左右角即可。