html - Filter property on div affecting children -

i have div, can contain several other divs, can outstep parent's borders.

parent div has css filter drop-shadow

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

so, children generate parent's shadow.

is possible mark 1 of children divs not render filter drop shadow?
unortunately, can't move div outside parent.

here's plunkr simple example :

.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 div ignore parent's filter , 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>

this not possible.

in filter effects module level 1 can read:

a computed value of other none results in creation of stacking context [css21] same way css opacity does. elements descendants rendered group filter effect applied group whole. [source: w3.org]

this means children affected by filter property same way opacity works.

workaround :

if can't change makup, can apply filter elements need on. in example, can replace black background pseudo element , apply drop shadow pseudo element. prevents applying filter parent , affecting children

example:

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