html - 框阴影不超过包含元素的背景颜色

Question

基本上我有一个侧边栏，它有一个嵌入框阴影，在那个侧边栏中是一个背景颜色为橙色的元素列表......我希望能够使嵌入框阴影与列表项的背景颜色重叠。

这是所需效果的图像：

这是我目前得到的效果：

请注意我的插入框阴影没有越过橙色背景？我怎么能做到这一点？

Answer 1

box-shadow在父元素上不会越过子元素，与父元素的背景颜色相同不会越过子元素的背景..您也必须将其分配给子元素box-shadow..这是一个 jsFiddle问题。

为了解决这个问题，你将不得不使用这样的东西：

.child{
    -webkit-box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 1),inset -10px 0px 10px -10px rgba(0, 0, 0, 1);
    box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 1),inset -10px 0px 10px -10px rgba(0, 0, 0, 1);
}

这将从子元素的每一侧创建两个阴影，看起来与父元素的box-shadow.

查看这个工作的 jsFiddle