影响儿童的div的过滤属性

Question

我有一个div，可以包含几个其他div，可以超越父母的边界。

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

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

所以，所有孩子也会产生父母的影子。

是否可以标记其中一个孩子divs不呈现过滤器投影？ 不幸的是，我无法将这个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   堆叠上下文[CSS21]与CSS不透明度相同。一切   元素后代与过滤器一起呈现为一个组   效果适用于整个群体。 [source: w3.org]

这意味着所有儿童都受到filter财产的影响，方式与opacity的工作方式相同。

解决方法：

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

示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;