Question

是否可以从div中投射一个box-shadow，但不允许阴影投射ON某些其他div？

另一种想法：是否有可能将某个div排除在阴影上？

如何使.p1投射的阴影不能投射在.noShadowsOnMePlease上，而是继续在其他div上投下阴影？

我完全愿意使用js / jquery，如果这是唯一的解决方案，但是谁不想用纯css执行此操作，amiright？

解决方案：基本上没有，但如果阴影是静态的，你可以伪造它。此外，如果你处于最前沿，css掩蔽可能会起作用。截至2014年1月，浏览器支持可能不稳定。没有css掩码的最佳解决方案：http://jsfiddle.net/zExS9/ - 使用:before选择器创建隐形阴影片段，然后隐藏溢出。

真的让你渴望accepts-shadows: false;属性，不是吗？

Answer 1

我担心的答案是：不，你不能。

我能做的最好：http://jsfiddle.net/Cd6fE/5/

您可以将.p1设置为透明背景：在阴影上绘制透明形状。我认为这就是你所能做的一切。

然后我用蓝色伪元素隐藏最后的阴影部分。

Answer 2

此解决方案可以应用于您的工作，尝试像:after这样的伪选择器：

.p2:before, .p3:before, .p4:before {
  display:block;
  content:" ";
  position:absolute;
  width:15px;
  height:15px;
  box-shadow: 0px 0px 5px 5px#000;
  background:black;
}

选中 Demo Fiddle

Answer 3

您可以使用z-index将元素放置在投射阴影的元素上。这样，阴影将位于元素下方，并且不可见。

Here is an Updated Fiddle

只有第三个方框.p3上有阴影。

编辑 - 相反，您可以使用内嵌框阴影并在div中投射阴影.. Here is another fiddle of that example，您需要调整阴影的位置，我只是这很快就向你展示了。

您还需要将供应商前缀添加到box-shadow中，-moz-， - webkit-， - o -

Answer 4

有办法伪造它，但实际上阻止它渲染我认为你是SOL

最简单的方法是将阴影变为蓝色，然后看起来它不会在背景上渲染

如何仅在某些元素上投射阴影

4 个答案: