如何确保子元素不会掩盖插入阴影？

Question

我有一个带有一些子元素的div元素，我正在尝试应用一个插入框阴影，子元素似乎掩盖了盒子阴影，这是一个jfiddle示例： jsFiddle Demo

如果您取消background-color课程上的optn，您会在那里看到插入框阴影，因此我的代码 有效。所以问题是，如何使子元素出现在盒子阴影下？

Answer 1

遇到同样的问题，找到半解决方案（如果你没有滚动内部效果很好）。

您可以将背景放在阴影下的元素中，方法是将它放在：before或：after伪类中，并将其设置为z-index：-1。它将完成背景部分。

但它会产生新的问题：要定位：在元素之前你需要应用.optn元素“position：relative;”如果你申请“position：relative;”它将从Webkit浏览器的圆角开始显示。

如果你没有内部滚动，你可以通过对第一个和最后一个.optn元素进行四舍五入来修复它，如果你想滚动这个内容，那么你就不能这样做了。

无论如何都有一个例子：http://jsfiddle.net/qN99W/

Answer 2

http://jsfiddle.net/wdYpv/3/

将背景颜色移动到父级。

Answer 3

你可以像这样添加填充：http://jsfiddle.net/jalbertbowdenii/wdYpv/2/

Answer 4

如果我正确理解你自己的目标，你已经在你的问题中得到了答案。 ;-)从optn中删除背景颜色，然后将其添加到optn-group。

正如您已经发现的那样，如果您在悬停或活动时optn有不同的背景颜色，它仍然会超出该插入阴影的顶部。简单且可能是懒惰的解决方案是不修改那些背景颜色，而是使用文本颜色和其他效果（例如，向下移1px）。或者如果你想要border-radius但是对于那些特殊情况（悬停，活动），你可以没有阴影，只需适当地设置border-radii。

除此之外，不要让世界洗脑让你认为只是因为我们在CSS中有很棒的新工具你不能再使用图像了。您真正想要做的事情可能仍然可以通过图像轻松完成。

查看众多网页上的“粉红色剪刀”效果，并且仍可以巧妙地放置一个或多个透明PNG。