CSS3 保留带有子元素的内部框阴影？

Question

看看这个: http://jsfiddle.net/6Yq8b/78/

当子元素移出其边界时，有没有一种方法可以保留 Div 的内部框阴影？在给定的链接中，发生的是子元素(“toplid”)遮挡了框顶部的内部框阴影...

想法？

Answer 1

您可以通过在 #toplid 元素上应用 inset box shadow 来模拟 box shadow:

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

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

---

编辑:

你已经在该元素上设置了 box-shadow，所以使用多个 box-shadows:

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

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