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;}

Demo

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;
}

Demo

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

2 个答案: