CSS box-shadow出现在顶级子元素上

Question

我有一个带有插入阴影的ul：

-webkit-box-shadow: inset 0px 0px 5px #000;
   -moz-box-shadow: inset 0px 0px 5px #000;
        box-shadow: inset 0px 0px 5px #000;

我希望所有的子元素出现在这个阴影下面。

请参阅： http ： //jsfiddle.net/jimsteinhart/XX36p/

有谁知道这是否可能？

Answer 1

在ul放置阴影的伪元素：

ul:before{
    content:''; width:100%; height:100%;
    position:absolute; top:0; left:0;

    -webkit-box-shadow: inset 0px 0px 5px #000;
   -moz-box-shadow: inset 0px 0px 5px #000;
    box-shadow: inset 0px 0px 5px #000;}

演示

Answer 2

现在有一个解决方案！ 使用伪元素和pointer-events:none;

ul:before{
  content:''; width:100%; height:100%;
  position:absolute; top:0; left:0;
  box-shadow: inset 0px 0px 10px
  pointer-events:none;
}

演示