Stop cascading CSS filter property

Question

I tried to make box-shadow affect the cross-browser operation in order to do what I used the "filter" property, but the effect cascades a child element (in my case, span). I tried to stop it using filter : nonebut it did not work on the Internet, but I could not find a solution. help me solve this problem.

HTML code:

<div id="shadow">
            <span>text text</span>             
</div>

CSS code:

#shadow{
 -moz-box-shadow: 3px 3px 4px #000;
 -webkit-box-shadow: 3px 3px 4px #000;
 box-shadow: 3px 3px 4px #000;
 /* For IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
 /* For IE 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Answer 1

set background color

#shadow{
 -moz-box-shadow: 3px 3px 4px #000;
 -webkit-box-shadow: 3px 3px 4px #000;
 box-shadow: 3px 3px 4px #000;
 background:#ffffff;
 /* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}