background-imageと-webkit-mask-imageのdivを使用しています。border-radiusはこの場合はWebKitブラウザでは機能しませんでした。-webkit-mask-imageを使用した要素のボックスシャドウ
box-shadowを親divに設定すると、Firefoxに表示されますが、Chromeには表示されません。 を無効にするにはどうすればいいですか？box-shadowも使えますか？問題あなたがたがbox-shadowを含めて、そのオプションのクリップは何もするので-webkit-mask-imageで切り出されていることであるhttp://jsfiddle.net/RhT3e/3
：ここ
は、実施例（違いを見るためにFirefoxとChromeでリンクを開く）でありますbox-shadow要素。
は、あなたがそれが影をレンダリングする形だ使用できるように、マスクされた画像の下に表示別の要素として、マスク画像を使用してください。これを行うには、元々マスクされている画像の幅と高さを知る必要があります。画像サイズがわからない場合や、動的である場合はJavaScriptを使用することができます。
私たちが直面する問題は、box-shadowを使用できないということです。これは、マスクの形状と一致しないボックスの影をレンダリングするためです。 box-shadow
は形状 
代わりの周りにレンダリングされません、我々はdrop-shadowフィルタを使用してそれをエミュレートしようとします。 
私は、マスクされているイメージを同じサイズのdivで囲むことを好み、マスクイメージの背景イメージを持っています。これは、それがどのように見えるかです。
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");
}