Das Problem Ihr ist, dass die box-shadow wird die mit dem -webkit-mask-image seit dieser Option Clips etwas darunter herausgeschnitten box-shadow Element.
Die Lösung
Verwenden Sie das Maskenbild als ein anderes Element unter dem maskierten Bild angezeigt, so dass Sie es Form einen Schatten machen verwenden können. Um dies zu tun, müssen wir die Breite und Höhe des Bildes kennen, das ursprünglich maskiert wurde. Wenn Sie die Bildgröße nicht kennen oder wenn es dynamisch ist, können Sie JavaScript verwenden.
Das Problem wir konfrontiert ist, dass wir box-shadow nicht verwenden können, da es eine Box Schatten rendern wird, die die Form der Maske nicht entsprechen wird.
Die box-shadow rendert nicht um die Form 
Statt, werden wir versuchen, es zu emulieren ein drop-shadow Filter. 
Ich ziehe das Bild wickeln wird mit der gleichen Größe mit einem div maskiert und hat ein Hintergrundbild des Maskenbildes. So wird es aussehen.
HTML
<div class="image-container">
<img class="wrap-image"
src="Origional Image URL"
id="wrap-image">
</div>
CSS
.image-container{
width: Original Image Width;
height: Original Image Width;
background-size: 100%;
background-image: url(URL of Mask Image);
-webkit-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
-moz-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
-ms-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
-o-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
}
#wrap-image{
mask: url("URL of Mask Image");
-webkit-mask-box-image: url("URL of Mask Image");
}
Here's a JSFiddle