El problema que usted tenga es que el box-shadow
está siendo recortada a cabo con la -webkit-mask-image
ya que los clips de opciones de cualquier cosa, incluyendo la box-shadow
elemento.
La solución
Usar la imagen de máscara como otro elemento que se muestra debajo de la imagen enmascarada para que pueda utilizar su forma de hacer una sombra. Para hacer esto, debemos conocer el ancho y la altura de la imagen que se está enmascarando originalmente. Si no conoce el tamaño de la imagen o si es dinámica, puede usar JavaScript.
El problema nos enfrentamos es que no podemos usar box-shadow
ya que hará que una sombra caja que no coincidirá con la forma de la máscara.
El box-shadow
no los hace alrededor de la forma
lugar, vamos a tratar de emular el uso de un filtro drop-shadow
.
Prefiero envolver la imagen que está siendo enmascarada con un div con el mismo tamaño y tiene una imagen de fondo de la imagen de la máscara. Esto es lo que se verá.
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