CSS3如何保留内部盒子阴影效果以及其子元素？

Question

请查看此链接：http://jsfiddle.net/6Yq8b/78/ 我想知道如何在子元素移动到边界之外时保留Div的内部盒阴影。 在给定的链接中，发生的情况是子元素（“toplid”）遮挡了框顶部的内部盒阴影...

你有什么想法吗？

- Abhishek

---

我猜唯一的方法是添加另一个元素来实现这个功能：http://jsfiddle.net/6Yq8b/84/ - Gerben

Answer 1

您可以通过在#toplid元素上应用一个内嵌的盒子阴影来模拟盒子阴影：

#toplid {
  box-shadow: inset 0 80px 42px -2px black;
}

http://jsfiddle.net/6Yq8b/86/

---

编辑：

您已经在该元素上设置了box-shadow，因此请使用多个box-shadow：

#toplid {
  box-shadow:0 0 20px -2px black, inset 0 80px 42px -2px black;
}

http://jsfiddle.net/6Yq8b/87/

- Brent

---

你的解决方案非常有趣，但它又带来了另一个问题...子元素不符合父元素的边框半径，导致设计的上半部分没有显示出曲线内边框...但是，我必须同意你的观点，从逻辑上讲，你的解决方案是有道理的... - Abhishek

@Abhishek 逗号前的 box-shadow 是您原始的，逗号后的是新的、内嵌的 box-shadow，以模拟 .btn 元素上的 box-shadow。如果您需要内嵌阴影更圆润，请给 #toplid 的顶部加上圆角：border-radius: 8px 8px 0 0。实际的角落被隐藏起来，阴影被带到可见性中，这样就可以很好地模拟父元素了。http://jsfiddle.net/6Yq8b/102/ - Brent