框阴影不会超过所包含元素的背景颜色

Question

基本上我有一个带有插入框阴影的侧边栏，里面的侧边栏是背景颜色为橙色的元素列表...我希望能够使插入框阴影与背景颜色重叠列表项目。

以下是所需效果的图像：

以下是我目前得到的效果：

注意我的插图框阴影是如何不越过橙色背景的？我怎么能够完成这个？

Answer 1

父元素上的

box-shadow不会覆盖子元素，就像父元素的背景颜色不会覆盖子元素的背景一样..您必须分配box-shadow对孩子也是如此.. this is a jsFiddle of the problem。

要解决此问题，您必须使用以下内容：

.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无缝连接。

查看 working jsFiddle