对影响儿童的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搬到父母外面。

下面是一个简单示例的普鲁克尔：

​

.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中，您可以读取：

计算值none将导致创建堆叠上下文CSS21，其方式与CSS不透明度相同。所有元素子元素都作为一个组呈现在一起，并将筛选效果应用于整个组。[资料来源: 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>

​