html - 影响子项的 div 上的过滤属性

Question

我有一个 div，它可以包含其他几个 div，可以超出父级的边界。

父 div 有一个 CSS 过滤器 drop-shadow

  -webkit-filter: drop-shadow(5px 5px 5px green);
  filter: drop-shadow(5px 5px 5px green);

所以，所有的 child 也会产生 parent 的影子。

是否可以将其中一个子 div 标记为不渲染滤镜投影？
不幸的是，我无法将此 div 移到父级之外。

这是 plunkr举个简单的例子:

.greenBorder {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: black;
  -webkit-filter: drop-shadow(5px 5px 5px green);
  -moz-filter: drop-shadow(5px 5px 5px green);
  -ms-filter: drop-shadow(5px 5px 5px green);
  -o-filter: drop-shadow(5px 5px 5px green);
  filter: drop-shadow(5px 5px 5px green);
}
.withShadow {
  position: absolute;
  width: 50px;
  height: 10px;
  left: 30px;
  top: 25px;
  background: red;
  border-radius: 5px;
}
.withoutShadow {
  position: absolute;
  width: 10px;
  height: 50px;
  left: 30px;
  top: 25px;
  background: blue;
  border-radius: 5px;
  /* Can this div ignore parent's filter and not generate shadow? */
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
  box-shadow: none;
}

<div class="greenBorder">
  <div class="withoutShadow"></div>
  <div class="withShadow"></div>
</div>

Answer 1

这不可能。

在第 1 级滤镜效果模块中，您可以阅读:

A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity does. All the elements descendants are rendered together as a group with the filter effect applied to the group as a whole. [source: w3.org]

这意味着所有子项都受 filter 属性的影响，就像 opacity 的工作方式一样。

解决方法:

如果您无法更改妆容，则可以仅将滤镜应用于您需要的元素。在您的示例中，您可以用伪元素替换黑色背景并将投影应用于该伪元素。这将防止将过滤器应用于父级并影响所有子级

例子:

.greenBorder {
  position:relative;
  width: 50px;
  height: 50px;
  border-radius: 10px;
}
.greenBorder:before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background: black;
  border-radius:inherit;
  -webkit-filter: drop-shadow(5px 5px 5px green);
  -moz-filter: drop-shadow(5px 5px 5px green);
  -ms-filter: drop-shadow(5px 5px 5px green);
  -o-filter: drop-shadow(5px 5px 5px green);
  filter: drop-shadow(5px 5px 5px green);
}

.withShadow {
  position: absolute;
  width: 50px;
  height: 10px;
  left: 30px;
  top: 25px;
  background: red;
  border-radius: 5px;
  -webkit-filter: drop-shadow(5px 5px 5px green);
  -moz-filter: drop-shadow(5px 5px 5px green);
  -ms-filter: drop-shadow(5px 5px 5px green);
  -o-filter: drop-shadow(5px 5px 5px green);
  filter: drop-shadow(5px 5px 5px green);
}

.withoutShadow {
  position: absolute;
  width: 10px;
  height: 50px;
  left: 30px;
  top: 25px;
  background: blue;
  border-radius: 5px;
}

<div class="greenBorder">
  <div class="withoutShadow"></div>
  <div class="withShadow"></div>
</div>