框阴影不会超过包含元素的背景颜色 [英] box shadow not going over background color of contained element

问题描述

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

以下是所需效果的图片：

注意我的内嵌框阴影不会超过橙色背景吗？

在父元素上不会覆盖子元素与父元素的背景颜色相同，不会覆盖子元素的背景..您将必须分配 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 无缝连接。

查看此 working jsFiddle

Basically I have a side bar that has an inset box shadow and inside that sidebar is a list of elements whose background color is orange... I would like to be able to make the inset box shadow overlap the background color of the list item.

Here is an image of the desired effect:

And here is the effect I am currently getting:

Notice how my inset box shadow isn't going over the orange background? How would I be able to accomlish this?

解决方案

box-shadow on the parent element will not go over the child element the same as the background color of the parent doesn't go over the child element's background.. you will have to assign the box-shadow to the child as well.. this is a jsFiddle of the problem.

To solve this you will have to use something like this:

.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);
}

This will create two shadows one from each side of the child element, which will look seamless with the parent's box-shadow.

View this working jsFiddle

这篇关于框阴影不会超过包含元素的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！