元素上的框阴影与-webkit-mask-image

Question

我在background-image的另一个div里面有一个-webkit-mask-image的div，因为在这种情况下border-radius没有在WebKit浏览器上工作。

如果我将box-shadow设置为父div，它会显示在Firefox中但不会显示在Chrome中。我如何覆盖-webkit-mask-image所以我也可以使用box-shadow？

这是一个工作示例（在Firefox和Chrome中打开链接以查看区别）：http://jsfiddle.net/RhT3e/3

Answer 1

您遇到的问题是box-shadow被-webkit-mask-image删除，因为该选项会剪切任何内容，包括box-shadow元素。

The Solution

使用蒙版图像作为蒙版图像下显示的另一个元素，以便您可以使用其形状渲染阴影。为此，我们必须知道最初被屏蔽的图像的宽度和高度。如果您不知道图像大小或它是否动态，您可以使用JavaScript。

我们面临的问题是我们不能使用box-shadow，因为它会渲染一个与阴影形状不匹配的盒子阴影。

box-shadow不会在形状周围呈现

---

相反，我们将尝试使用drop-shadow过滤器来模拟它。

我更喜欢使用相同大小的div来包裹图像，并且具有蒙版图像的背景图像。这就是它的样子。

HTML

<div class="image-container">
    <img class="wrap-image" src="<Original 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。