框阴影不超过包含元素的背景颜色答案

【问题标题】：box shadow not going over background color of contained element框阴影不超过包含元素的背景颜色
【发布时间】：2013-07-03 23:21:11
【问题描述】：

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

这是一张想要的效果图：

这是我目前得到的效果：

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

【问题讨论】：

您可以添加JSFiddle 或类似的内容来显示您的问题吗？
jsfiddle.net/8gYRe

标签： html css

【解决方案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

【讨论】：

谢谢！我将额外的 box-shadow 作为 :hover 应用在子元素上，因为不同的背景颜色（和问题问题）仅出现在该元素的悬停时