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

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