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

Question

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

是否有一种方法，我可以保留一个Div的内部框阴影时，子元素移动到其边界之外?在给定的链接中，发生的情况是子元素("toplid")模糊了盒子顶部的内部框影…

想法?

Answer 1

您可以通过在#toplid元素上应用插入框阴影来模拟它的框阴影:

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

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

---

编辑:

你已经在那个元素上设置了框阴影，所以使用多个框阴影:

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

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