Фильтровать свойство на 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

Это не представляется возможным.

В Filter Effects модуль уровня 1 вы можете прочитать:

Вычисленное значение кроме доли не приводит к созданию укладки контекста [CSS21] так же, как CSS непрозрачности делает. Все потомки элементов визуализируются вместе как группа с эффектом фильтра , применяемым к группе в целом. [source: w3.org]

Это означает, что все дети страдают от по filter собственности таким же образом opacity работы.

Обход:

Если вы не можете изменить Makup, вы можете применить фильтр только к элементам, которые необходимо его. В вашем примере вы можете заменить черный фон псевдоэлементом и применить тень к этому псевдоэлементу. Это предотвращает применения фильтра к родителю и затрагивающий всем детям

Пример:

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