将蒙版应用到 box-shadow

Question

I have a div with a mask applied to it. I noticed that I can't apply a box-shadow on that same div, so I must move the shadow to a "wrapper" div.

The problem is that if the shadow is placed on the shadow div, the mask is not applied to the shadow.

How can I apply a mask to a div and to it's shadow?

 .wrapper { width: 200px; height: 200px; box-shadow: 17px 13px 7px 3px rgba(0,0,0,0.75); } .b { width: 200px; height: 200px; background-color: yellow; border: 2px solid black; -webkit-mask: radial-gradient( circle at center top, transparent 30px, black 31px ) top / 100% 51%, radial-gradient( circle at right bottom, transparent 30px, black 31px ) right bottom / 51% 51%, radial-gradient( circle at left bottom, transparent 30px, black 31px ) left bottom / 51% 51%; -webkit-mask-repeat: no-repeat; }

 <div class="wrapper"> <div class="b"></div> </div>

Answer 1

You need a drop-shadow, not a box-shadow:

 .wrapper { width: 200px; height: 200px; filter:drop-shadow(17px 13px 7px rgba(0,0,0,0.75)); } .b { width: 200px; height: 200px; background-color: yellow; border: 2px solid black; -webkit-mask: radial-gradient( circle at center top, transparent 30px, black 31px ) top / 100% 51%, radial-gradient( circle at right bottom, transparent 30px, black 31px ) right bottom / 51% 51%, radial-gradient( circle at left bottom, transparent 30px, black 31px ) left bottom / 51% 51%; -webkit-mask-repeat: no-repeat; }

 <div class="wrapper"> <div class="b"></div> </div>