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;
但有在子容器顶部提到的一行。
任何人都可以告诉我适当的方式来做到这一点吗?
答
试试这个:
.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>
+0
感谢@ Oldcode101。它的效果非常好,只需要修改图像以覆盖图像的左右角。 – Ha0710 2011-12-22 09:32:39
你能帮助我们了解你的目标更好一点(如例子) – c4urself 2011-12-21 17:24:06
HTML例子是非常有帮助的 – PseudoNinja 2011-12-21 18:04:27